@ds-autonomie/react-native 0.3.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @ds-autonomie/react-native
 
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies [e86df51]
+  - @ds-autonomie/assets@1.2.0
+
+## 0.4.0
+
+### Minor Changes
+
+- 8987c49: `Tabs`,`TabItem`: Implémentation des composants Tabs et TabItem
+
+### Patch Changes
+
+- @ds-autonomie/assets@1.1.1
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/chunks/chunk.2XHLIGU3.js

@@ -0,0 +1,16 @@
+// src/components/tabs/Tabs.styles.ts
+import { StyleSheet } from "react-native";
+var tabsStyles = StyleSheet.create({
+  container: {
+    flexDirection: "row"
+  },
+  indicator: {
+    position: "absolute",
+    height: 2,
+    bottom: 0
+  }
+});
+
+export {
+  tabsStyles
+};

package/dist/chunks/{chunk.4SSEOHVB.js → chunk.4GJSNQET.js}

@@ -33,6 +33,13 @@ var fonts = StyleSheet.create({
     lineHeight: 16,
     fontFamily: "Cabin-Regular",
     letterSpacing: 0.5
+  },
+  labelLarge: {
+    fontFamily: "Cabin-Regular",
+    fontWeight: "500",
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1
   }
 });
 

package/dist/chunks/{chunk.3QXPJAHY.js → chunk.523CLSSB.js}

@@ -1,6 +1,6 @@
 import {
   fonts
-} from "./chunk.4SSEOHVB.js";
+} from "./chunk.4GJSNQET.js";
 
 // src/components/listTitle/ListTitle.styles.ts
 import theme from "@ds-autonomie/assets/js/dsa-theme";

package/dist/chunks/{chunk.CIHQLL6Y.js → chunk.65RCE3RB.js}

@@ -1,6 +1,6 @@
 import {
   fonts
-} from "./chunk.4SSEOHVB.js";
+} from "./chunk.4GJSNQET.js";
 
 // src/components/textInput/TextInput.styles.ts
 import theme from "@ds-autonomie/assets/js/dsa-theme";

package/dist/chunks/{chunk.INEDXDER.js → chunk.DE3QWY2X.js}

@@ -1,6 +1,6 @@
 import {
   fonts
-} from "./chunk.4SSEOHVB.js";
+} from "./chunk.4GJSNQET.js";
 
 // src/components/listItem/ListItem.styles.ts
 import theme from "@ds-autonomie/assets/js/dsa-theme";

package/dist/chunks/chunk.DGZYY7CA.js

@@ -0,0 +1,47 @@
+import {
+  tabItemStyles
+} from "./chunk.VPRSFOFO.js";
+import {
+  Icon
+} from "./chunk.OQSCGAEY.js";
+
+// src/components/tabs/tabItem/TabItem.tsx
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import React, { useState } from "react";
+import {
+  Text,
+  Pressable
+} from "react-native";
+var TabItem = React.forwardRef(function TabItem2({ icon, title, active = false, style, ...restProps }, ref) {
+  const [isFocus, setIsFocus] = useState(false);
+  return <Pressable
+    ref={ref}
+    {...restProps}
+    accessibilityLabel="tab"
+    accessibilityRole="tab"
+    accessible
+    accessibilityState={{
+      selected: active
+    }}
+    role="tab"
+    onFocus={() => setIsFocus(true)}
+    style={[
+      style,
+      tabItemStyles.container,
+      active && tabItemStyles.selected,
+      isFocus && tabItemStyles.focus,
+      active && isFocus && tabItemStyles.focusSelected
+    ]}
+  >
+    {icon && <Icon
+      name={icon}
+      size={18}
+      color={active ? theme.collection.tab.selected["on-enabled"] : theme.collection.tab.unselected["on-enabled"]}
+    />}
+    <Text style={[tabItemStyles.text, active && tabItemStyles.selected]}>{title}</Text>
+  </Pressable>;
+});
+
+export {
+  TabItem
+};

package/dist/chunks/{chunk.73S52VD6.js → chunk.DMWLLPBB.js}

@@ -2,7 +2,7 @@ import {
   getCursorColors,
   inputWrapperStyles,
   styles
-} from "./chunk.CIHQLL6Y.js";
+} from "./chunk.65RCE3RB.js";
 import {
   Icon
 } from "./chunk.OQSCGAEY.js";

package/dist/chunks/chunk.I5NPEO25.js

@@ -0,0 +1,147 @@
+import {
+  tabsStyles
+} from "./chunk.2XHLIGU3.js";
+
+// src/components/tabs/Tabs.tsx
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import React from "react";
+import {
+  View,
+  Animated,
+  ScrollView,
+  Platform
+} from "react-native";
+var sumTabItemWidthToIndex = (tabItemPositions, index) => {
+  let total = 0;
+  for (let i = 0; i <= index; i++) {
+    total += tabItemPositions[i]?.width || 0;
+  }
+  return total;
+};
+var SCROLL_ANIMATED_DURATION = 170;
+var Tabs = ({
+  children,
+  value = 0,
+  onChange,
+  scrollable = false,
+  style,
+  ...rest
+}) => {
+  const animationRef = React.useRef(new Animated.Value(0));
+  const scrollViewRef = React.useRef(null);
+  const scrollViewPosition = React.useRef(0);
+  const tabItemPositions = React.useRef([]);
+  const [tabContainerWidth, setTabContainerWidth] = React.useState(0);
+  const tabs = React.Children.toArray(children);
+  const scrollHandler = React.useCallback(
+    (currentTabIndex) => {
+      const isScrollableTabs = tabItemPositions.current.length > currentTabIndex;
+      if (isScrollableTabs) {
+        const tabPositions = tabItemPositions.current.map(
+          ({ position }, index) => {
+            return Platform.OS === "ios" ? sumTabItemWidthToIndex(tabItemPositions.current, index) : position;
+          }
+        );
+        const previousTabItemXPosition = currentTabIndex === 0 ? 0 : tabPositions[currentTabIndex - 1];
+        const currentTabItemXPosition = tabPositions[currentTabIndex];
+        const scrollCurrentPosition = scrollViewPosition.current;
+        let scrollX = scrollCurrentPosition;
+        if (previousTabItemXPosition < scrollCurrentPosition) {
+          scrollX += previousTabItemXPosition - scrollCurrentPosition;
+        } else if (scrollCurrentPosition + tabContainerWidth < currentTabItemXPosition) {
+          scrollX += currentTabItemXPosition - (scrollCurrentPosition + tabContainerWidth);
+        }
+        scrollViewRef.current && scrollViewRef.current.scrollTo({
+          x: scrollX,
+          y: 0,
+          animated: true
+        });
+      }
+    },
+    [tabContainerWidth]
+  );
+  React.useEffect(() => {
+    Animated.timing(animationRef.current, {
+      toValue: value,
+      useNativeDriver: true,
+      duration: SCROLL_ANIMATED_DURATION
+    }).start();
+    scrollable && requestAnimationFrame(() => scrollHandler(value));
+  }, [animationRef, value, scrollable, scrollHandler]);
+  const onScrollHandler = (event) => {
+    scrollViewPosition.current = event.nativeEvent.contentOffset.x;
+  };
+  const indicatorTransitionInterpolate = React.useMemo(() => {
+    const countItems = tabs.length;
+    if (countItems < 2 || tabItemPositions.current.length === 0) {
+      return 0;
+    }
+    const inputRange = Array.from(Array(countItems + 1).keys());
+    const outputRange = tabItemPositions.current.map(
+      ({ position }, index) => {
+        return Platform.OS === "ios" ? sumTabItemWidthToIndex(tabItemPositions.current, index) : position;
+      }
+    );
+    if (inputRange.length - 1 !== outputRange.length || outputRange.includes(void 0)) {
+      return 0;
+    }
+    return animationRef.current.interpolate({
+      inputRange,
+      outputRange: [0, ...outputRange]
+    });
+  }, [animationRef, tabs, tabItemPositions.current.length]);
+  const tabIndicatorWidth = tabItemPositions.current[value]?.width;
+  return <View
+    {...rest}
+    accessibilityRole="tablist"
+    style={[tabsStyles.container, style]}
+    onLayout={({ nativeEvent: { layout } }) => {
+      setTabContainerWidth(layout.width);
+    }}
+  >{React.createElement(
+    scrollable ? ScrollView : React.Fragment,
+    {
+      ...scrollable && {
+        horizontal: true,
+        ref: scrollViewRef,
+        onScroll: onScrollHandler,
+        scrollEventThrottle: 1,
+        showsHorizontalScrollIndicator: false
+      }
+    },
+    <>
+      {tabs.map(
+        (tab, index) => React.cloneElement(tab, {
+          onPress: () => onChange(index),
+          onLayout: (event) => {
+            const { width } = event.nativeEvent.layout;
+            const previousItemPosition = tabItemPositions.current[index - 1]?.position || 0;
+            tabItemPositions.current[index] = {
+              position: previousItemPosition + width,
+              width
+            };
+          },
+          active: index === value
+        })
+      )}
+      <Animated.View
+        style={[
+          tabsStyles.indicator,
+          {
+            backgroundColor: theme.collection.tab.selected["on-enabled"],
+            transform: [
+              {
+                translateX: indicatorTransitionInterpolate ?? 0
+              }
+            ],
+            width: tabIndicatorWidth
+          }
+        ]}
+      />
+    </>
+  )}</View>;
+};
+
+export {
+  Tabs
+};

package/dist/chunks/{chunk.4MPJJ7EN.js → chunk.JQRCUHR6.js}

@@ -1,6 +1,6 @@
 import {
   styles
-} from "./chunk.INEDXDER.js";
+} from "./chunk.DE3QWY2X.js";
 import {
   Icon
 } from "./chunk.OQSCGAEY.js";

package/dist/chunks/{chunk.KVXJ2L2C.js → chunk.LR5V6SDZ.js}

@@ -1,6 +1,6 @@
 import {
   listCaptionStyles
-} from "./chunk.4ZX27FCY.js";
+} from "./chunk.TWXAL56H.js";
 
 // src/components/listCaption/ListCaption.tsx
 import React from "react";

package/dist/chunks/{chunk.4ZX27FCY.js → chunk.TWXAL56H.js}

@@ -1,6 +1,6 @@
 import {
   fonts
-} from "./chunk.4SSEOHVB.js";
+} from "./chunk.4GJSNQET.js";
 
 // src/components/listCaption/ListCaption.styles.ts
 import theme from "@ds-autonomie/assets/js/dsa-theme";

package/dist/chunks/chunk.VPRSFOFO.js

@@ -0,0 +1,40 @@
+import {
+  fonts
+} from "./chunk.4GJSNQET.js";
+
+// src/components/tabs/tabItem/TabItem.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var tabItemStyles = StyleSheet.create({
+  container: {
+    height: 48,
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: theme.primitives.spacing[16],
+    gap: theme.primitives.spacing[8],
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  text: {
+    ...fonts.labelLarge,
+    textAlign: "center",
+    color: theme.collection.tab.unselected["on-enabled"]
+  },
+  selected: {
+    color: theme.collection.tab.selected["on-enabled"],
+    backgroundColor: theme.collection.tab.selected.enabled
+  },
+  focus: {
+    color: theme.collection.tab.selected["on-focus"],
+    backgroundColor: theme.collection.tab.unselected.focus
+  },
+  focusSelected: {
+    color: theme.collection.tab.selected["on-focus"],
+    backgroundColor: theme.collection.tab.selected.focus
+  }
+});
+
+export {
+  tabItemStyles
+};

package/dist/chunks/{chunk.6DY4BFMZ.js → chunk.WVKTSG5X.js}

@@ -1,6 +1,6 @@
 import {
   listTitleStyles
-} from "./chunk.3QXPJAHY.js";
+} from "./chunk.523CLSSB.js";
 
 // src/components/listTitle/ListTitle.tsx
 import React from "react";

package/dist/components/listCaption/ListCaption.js

@@ -1,8 +1,8 @@
 import {
   ListCaption
-} from "../../chunks/chunk.KVXJ2L2C.js";
-import "../../chunks/chunk.4ZX27FCY.js";
-import "../../chunks/chunk.4SSEOHVB.js";
+} from "../../chunks/chunk.LR5V6SDZ.js";
+import "../../chunks/chunk.TWXAL56H.js";
+import "../../chunks/chunk.4GJSNQET.js";
 export {
   ListCaption
 };

package/dist/components/listCaption/ListCaption.styles.js

@@ -1,7 +1,7 @@
 import {
   listCaptionStyles
-} from "../../chunks/chunk.4ZX27FCY.js";
-import "../../chunks/chunk.4SSEOHVB.js";
+} from "../../chunks/chunk.TWXAL56H.js";
+import "../../chunks/chunk.4GJSNQET.js";
 export {
   listCaptionStyles
 };

package/dist/components/listItem/ListItem.js

@@ -1,8 +1,8 @@
 import {
   ListItem
-} from "../../chunks/chunk.4MPJJ7EN.js";
-import "../../chunks/chunk.INEDXDER.js";
-import "../../chunks/chunk.4SSEOHVB.js";
+} from "../../chunks/chunk.JQRCUHR6.js";
+import "../../chunks/chunk.DE3QWY2X.js";
+import "../../chunks/chunk.4GJSNQET.js";
 import "../../chunks/chunk.OQSCGAEY.js";
 export {
   ListItem

package/dist/components/listItem/ListItem.styles.js

@@ -1,7 +1,7 @@
 import {
   styles
-} from "../../chunks/chunk.INEDXDER.js";
-import "../../chunks/chunk.4SSEOHVB.js";
+} from "../../chunks/chunk.DE3QWY2X.js";
+import "../../chunks/chunk.4GJSNQET.js";
 export {
   styles
 };

package/dist/components/listTitle/ListTitle.js

@@ -1,8 +1,8 @@
 import {
   ListTitle
-} from "../../chunks/chunk.6DY4BFMZ.js";
-import "../../chunks/chunk.3QXPJAHY.js";
-import "../../chunks/chunk.4SSEOHVB.js";
+} from "../../chunks/chunk.WVKTSG5X.js";
+import "../../chunks/chunk.523CLSSB.js";
+import "../../chunks/chunk.4GJSNQET.js";
 export {
   ListTitle
 };

package/dist/components/listTitle/ListTitle.styles.js

@@ -1,7 +1,7 @@
 import {
   listTitleStyles
-} from "../../chunks/chunk.3QXPJAHY.js";
-import "../../chunks/chunk.4SSEOHVB.js";
+} from "../../chunks/chunk.523CLSSB.js";
+import "../../chunks/chunk.4GJSNQET.js";
 export {
   listTitleStyles
 };

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+type Props = {
+    /**
+     * Active tab index
+     * */
+    value: number;
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange: (index: number) => void;
+    /**
+     * If `true` the tab list is scrollable
+     * */
+    scrollable?: boolean;
+} & ViewProps;
+export declare const Tabs: ({ children, value, onChange, scrollable, style, ...rest }: Props) => React.JSX.Element;
+export {};

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,7 @@
+import {
+  Tabs
+} from "../../chunks/chunk.I5NPEO25.js";
+import "../../chunks/chunk.2XHLIGU3.js";
+export {
+  Tabs
+};

package/dist/components/tabs/Tabs.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const tabsStyles: {
+    container: {
+        flexDirection: "row";
+    };
+    indicator: {
+        position: "absolute";
+        height: number;
+        bottom: number;
+    };
+};

package/dist/components/tabs/Tabs.styles.js

@@ -0,0 +1,6 @@
+import {
+  tabsStyles
+} from "../../chunks/chunk.2XHLIGU3.js";
+export {
+  tabsStyles
+};

package/dist/components/tabs/tabItem/TabItem.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { PressableProps, ViewStyle, StyleProp, View } from 'react-native';
+type OmittedPressableProps = 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityState' | 'accessible' | 'children' | 'onFocus' | 'role' | 'style';
+export type TabItemProps = {
+    /**
+     * Name of the icon.
+     */
+    icon?: string;
+    /**
+     * Text displayed in tab.
+     */
+    title: string;
+    /**
+     * If `style` is defined, it will extend the container style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * If `active` is true, the tab is selected
+     * */
+    active?: boolean;
+} & Omit<PressableProps, OmittedPressableProps>;
+export declare const TabItem: React.ForwardRefExoticComponent<{
+    /**
+     * Name of the icon.
+     */
+    icon?: string | undefined;
+    /**
+     * Text displayed in tab.
+     */
+    title: string;
+    /**
+     * If `style` is defined, it will extend the container style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * If `active` is true, the tab is selected
+     * */
+    active?: boolean | undefined;
+} & Omit<PressableProps, OmittedPressableProps> & React.RefAttributes<View>>;
+export {};

package/dist/components/tabs/tabItem/TabItem.js

@@ -0,0 +1,9 @@
+import {
+  TabItem
+} from "../../../chunks/chunk.DGZYY7CA.js";
+import "../../../chunks/chunk.VPRSFOFO.js";
+import "../../../chunks/chunk.4GJSNQET.js";
+import "../../../chunks/chunk.OQSCGAEY.js";
+export {
+  TabItem
+};

package/dist/components/tabs/tabItem/TabItem.styles.d.ts

@@ -0,0 +1,33 @@
+export declare const tabItemStyles: {
+    container: {
+        height: number;
+        flex: number;
+        justifyContent: "center";
+        paddingHorizontal: 16;
+        gap: 8;
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    text: {
+        textAlign: "center";
+        color: "#252625ff";
+        fontFamily: string;
+        fontWeight: "500";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+    };
+    selected: {
+        color: "#540abdff";
+        backgroundColor: "#f6f1fcff";
+    };
+    focus: {
+        color: "#540abdff";
+        backgroundColor: "#f7f7f7ff";
+    };
+    focusSelected: {
+        color: "#540abdff";
+        backgroundColor: "#ede4faff";
+    };
+};

package/dist/components/tabs/tabItem/TabItem.styles.js

@@ -0,0 +1,7 @@
+import {
+  tabItemStyles
+} from "../../../chunks/chunk.VPRSFOFO.js";
+import "../../../chunks/chunk.4GJSNQET.js";
+export {
+  tabItemStyles
+};

package/dist/components/textInput/TextInput.js

@@ -1,8 +1,8 @@
 import {
   TextInput
-} from "../../chunks/chunk.73S52VD6.js";
-import "../../chunks/chunk.CIHQLL6Y.js";
-import "../../chunks/chunk.4SSEOHVB.js";
+} from "../../chunks/chunk.DMWLLPBB.js";
+import "../../chunks/chunk.65RCE3RB.js";
+import "../../chunks/chunk.4GJSNQET.js";
 import "../../chunks/chunk.OQSCGAEY.js";
 export {
   TextInput

package/dist/components/textInput/TextInput.styles.js

@@ -2,8 +2,8 @@ import {
   getCursorColors,
   inputWrapperStyles,
   styles
-} from "../../chunks/chunk.CIHQLL6Y.js";
-import "../../chunks/chunk.4SSEOHVB.js";
+} from "../../chunks/chunk.65RCE3RB.js";
+import "../../chunks/chunk.4GJSNQET.js";
 export {
   getCursorColors,
   inputWrapperStyles,

package/dist/index.d.ts

@@ -8,4 +8,6 @@ export * from './components/radio/Radio';
 export * from './components/searchField/SearchField';
 export * from './components/toggle/Toggle';
 export * from './components/textInput/TextInput';
+export * from './components/tabs/Tabs';
+export * from './components/tabs/tabItem/TabItem';
 export * from './utils';

package/dist/index.js

@@ -1,28 +1,36 @@
+import {
+  TabItem
+} from "./chunks/chunk.DGZYY7CA.js";
+import "./chunks/chunk.VPRSFOFO.js";
 import {
   SearchField
 } from "./chunks/chunk.KVGKM2JI.js";
 import "./chunks/chunk.7H4YRP4X.js";
+import {
+  Tabs
+} from "./chunks/chunk.I5NPEO25.js";
+import "./chunks/chunk.2XHLIGU3.js";
 import {
   TextInput
-} from "./chunks/chunk.73S52VD6.js";
-import "./chunks/chunk.CIHQLL6Y.js";
+} from "./chunks/chunk.DMWLLPBB.js";
+import "./chunks/chunk.65RCE3RB.js";
 import {
   Toggle
 } from "./chunks/chunk.B2JV2E47.js";
 import "./chunks/chunk.CZ5Y2AVH.js";
 import {
   ListCaption
-} from "./chunks/chunk.KVXJ2L2C.js";
-import "./chunks/chunk.4ZX27FCY.js";
+} from "./chunks/chunk.LR5V6SDZ.js";
+import "./chunks/chunk.TWXAL56H.js";
 import {
   ListItem
-} from "./chunks/chunk.4MPJJ7EN.js";
-import "./chunks/chunk.INEDXDER.js";
+} from "./chunks/chunk.JQRCUHR6.js";
+import "./chunks/chunk.DE3QWY2X.js";
 import {
   ListTitle
-} from "./chunks/chunk.6DY4BFMZ.js";
-import "./chunks/chunk.3QXPJAHY.js";
-import "./chunks/chunk.4SSEOHVB.js";
+} from "./chunks/chunk.WVKTSG5X.js";
+import "./chunks/chunk.523CLSSB.js";
+import "./chunks/chunk.4GJSNQET.js";
 import {
   Radio
 } from "./chunks/chunk.LN5IVTGU.js";
@@ -53,6 +61,8 @@ export {
   ListTitle,
   Radio,
   SearchField,
+  TabItem,
+  Tabs,
   TextInput,
   Toggle,
   useFonts

package/dist/styles/fonts.d.ts

@@ -32,4 +32,11 @@ export declare const fonts: {
         fontFamily: string;
         letterSpacing: number;
     };
+    labelLarge: {
+        fontFamily: string;
+        fontWeight: "500";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-autonomie/react-native",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "author": "CNSA",
   "license": "MIT",
   "type": "module",
@@ -32,7 +32,7 @@
     "react-native-vector-icons": "^10.0.1",
     "react-native-reanimated": "^3.3.0",
     "expo-font": "^11.4.0",
-    "@ds-autonomie/assets": "1.1.1"
+    "@ds-autonomie/assets": "1.2.0"
   },
   "devDependencies": {
     "@storybook/react-native": "6.5.7",
@@ -46,7 +46,7 @@
     "react-native-accessibility-engine": "3.2.0",
     "react-test-renderer": "18.2.0",
     "ts-jest": "29.1.1",
-    "@ds-autonomie/eslint-config": "2.0.0"
+    "@ds-autonomie/eslint-config": "2.1.0"
   },
   "scripts": {
     "ts:check": "tsc --noEmit",