@ds-autonomie/react-native 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @ds-autonomie/react-native
 
+## 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
+
+- 76ac0b5: `ListItem`: implémentation du composant ListItem
+- 2e76d7e: `divider`: Implémentation du composant divider
+- 8273161: `listTitle`: Implémentation du ListTitle
+  `listCaption`: Implémentation du ListCaption
+
+### Patch Changes
+
+- f98a445: docs: repasse documentaire
+
 ## 0.2.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.4GJSNQET.js

@@ -0,0 +1,48 @@
+// src/styles/fonts.ts
+import { StyleSheet } from "react-native";
+var fonts = StyleSheet.create({
+  bodyLarge: {
+    fontSize: 16,
+    fontFamily: "Cabin-Regular",
+    fontWeight: "400",
+    lineHeight: 24,
+    letterSpacing: 0.5
+  },
+  bodyMedium: {
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 20,
+    fontFamily: "Cabin-Regular",
+    letterSpacing: 0.25
+  },
+  bodySmall: {
+    fontSize: 12,
+    fontFamily: "Cabin-Regular",
+    letterSpacing: 0.36
+  },
+  titleSmall: {
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 20,
+    fontFamily: "Cabin-Regular",
+    letterSpacing: 0.5
+  },
+  labelMedium: {
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 16,
+    fontFamily: "Cabin-Regular",
+    letterSpacing: 0.5
+  },
+  labelLarge: {
+    fontFamily: "Cabin-Regular",
+    fontWeight: "500",
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1
+  }
+});
+
+export {
+  fonts
+};

package/dist/chunks/chunk.523CLSSB.js

@@ -0,0 +1,22 @@
+import {
+  fonts
+} from "./chunk.4GJSNQET.js";
+
+// src/components/listTitle/ListTitle.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var listTitleStyles = StyleSheet.create({
+  container: {
+    paddingHorizontal: theme.primitives.spacing[16],
+    paddingTop: theme.primitives.spacing[8],
+    paddingBottom: theme.primitives.spacing[12]
+  },
+  text: {
+    ...fonts.titleSmall,
+    paddingHorizontal: theme.primitives.spacing[16]
+  }
+});
+
+export {
+  listTitleStyles
+};

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

@@ -1,29 +1,11 @@
-// src/components/text-input/TextInput.styles.ts
-import theme from "@ds-autonomie/assets/js/dsa-theme";
-import { StyleSheet as StyleSheet2 } from "react-native";
+import {
+  fonts
+} from "./chunk.4GJSNQET.js";
 
-// src/styles/fonts.ts
+// src/components/textInput/TextInput.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
 import { StyleSheet } from "react-native";
-var fonts = StyleSheet.create({
-  bodyLarge: {
-    fontSize: 16,
-    fontFamily: "Cabin-Regular",
-    letterSpacing: 0.5
-  },
-  bodyMedium: {
-    fontSize: 14,
-    fontFamily: "Cabin-Regular",
-    letterSpacing: 0.25
-  },
-  bodySmall: {
-    fontSize: 12,
-    fontFamily: "Cabin-Regular",
-    letterSpacing: 0.36
-  }
-});
-
-// src/components/text-input/TextInput.styles.ts
-var styles = StyleSheet2.create({
+var styles = StyleSheet.create({
   container: {
     display: "flex",
     flex: 1
@@ -71,7 +53,7 @@ var styles = StyleSheet2.create({
     color: theme.collection.input.hint
   }
 });
-var inputWrapperStyles = StyleSheet2.create({
+var inputWrapperStyles = StyleSheet.create({
   default: {
     backgroundColor: theme.collection.input.background.default,
     borderColor: theme.collection.input.border.default,

package/dist/chunks/{chunk.MCKLJGG3.js → chunk.7H4YRP4X.js}

@@ -1,4 +1,4 @@
-// src/components/search/SearchField.styles.tsx
+// src/components/searchField/SearchField.styles.tsx
 import theme from "@ds-autonomie/assets/js/dsa-theme";
 import { StyleSheet } from "react-native";
 
@@ -7,7 +7,7 @@ import { Platform } from "react-native";
 var isIOS = Platform.OS === "ios";
 var isAndroid = Platform.OS === "android";
 
-// src/components/search/SearchField.styles.tsx
+// src/components/searchField/SearchField.styles.tsx
 var placeholderTextColor = "#3C3C4399";
 var styles = StyleSheet.create({
   container: {

package/dist/chunks/chunk.DE3QWY2X.js

@@ -0,0 +1,51 @@
+import {
+  fonts
+} from "./chunk.4GJSNQET.js";
+
+// src/components/listItem/ListItem.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    borderBottomWidth: 1,
+    borderBottomColor: theme.collection.background.divider,
+    backgroundColor: theme.collection["list item"].background,
+    paddingHorizontal: theme.primitives.spacing[16],
+    paddingVertical: theme.primitives.spacing[8],
+    display: "flex",
+    height: "auto",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.primitives.spacing[16]
+  },
+  large: {
+    minHeight: 60
+  },
+  lastItem: {
+    borderBottomWidth: 0,
+    paddingBottom: theme.primitives.spacing[8] + 1
+  },
+  title: {
+    ...fonts.bodyLarge,
+    color: theme.collection["list item"].label
+  },
+  subtitle: {
+    ...fonts.bodyMedium,
+    color: theme.collection["list item"].subtitle
+  },
+  inset: {
+    marginHorizontal: theme.primitives.spacing[16]
+  },
+  insetFirst: {
+    borderTopRightRadius: theme.primitives.radius[8],
+    borderTopLeftRadius: theme.primitives.radius[8]
+  },
+  insetLast: {
+    borderBottomRightRadius: theme.primitives.radius[8],
+    borderBottomLeftRadius: theme.primitives.radius[8]
+  }
+});
+
+export {
+  styles
+};

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.DMHRBYRF.js

@@ -0,0 +1,69 @@
+import {
+  getContainerStyle,
+  getIconColor,
+  getTextStyle
+} from "./chunk.RNOZ5AW4.js";
+import {
+  Icon
+} from "./chunk.OQSCGAEY.js";
+
+// src/components/button/Button.tsx
+import React from "react";
+import {
+  Pressable,
+  Text
+} from "react-native";
+var Button = React.forwardRef(function Toggle({
+  variant = "primary",
+  style,
+  disabled = false,
+  endIcon,
+  size = "medium",
+  startIcon,
+  children,
+  ...props
+}, ref) {
+  const hasOnlyOneIcon = [!!startIcon, !!endIcon].filter(Boolean).length === 1 && !children;
+  return <Pressable
+    ref={ref}
+    {...props}
+    accessibilityLabel="button"
+    accessibilityRole="button"
+    accessible
+    aria-disabled={disabled}
+    accessibilityState={{
+      disabled
+    }}
+    disabled={disabled}
+    role="button"
+    style={({ pressed }) => [
+      style,
+      getContainerStyle({ variant, size, hasOnlyOneIcon, disabled, pressed })
+    ]}
+  >{({ pressed }) => {
+    const iconColor = getIconColor({
+      pressed,
+      disabled,
+      variant
+    });
+    return <>
+      {startIcon && <Icon name={startIcon} color={iconColor} size={24} />}
+      {children !== void 0 && <Text
+        style={[
+          getTextStyle({
+            variant,
+            size,
+            hasOnlyOneIcon,
+            disabled,
+            pressed
+          })
+        ]}
+      >{children}</Text>}
+      {endIcon && <Icon name={endIcon} color={iconColor} size={24} />}
+    </>;
+  }}</Pressable>;
+});
+
+export {
+  Button
+};

package/dist/chunks/{chunk.2HOUMFYI.js → chunk.DMWLLPBB.js}

@@ -2,12 +2,12 @@ import {
   getCursorColors,
   inputWrapperStyles,
   styles
-} from "./chunk.QOZS5EA3.js";
+} from "./chunk.65RCE3RB.js";
 import {
   Icon
 } from "./chunk.OQSCGAEY.js";
 
-// src/components/text-input/TextInput.tsx
+// src/components/textInput/TextInput.tsx
 import React, { useState } from "react";
 import {
   TextInput as NativeTextInput,

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.JQRCUHR6.js

@@ -0,0 +1,65 @@
+import {
+  styles
+} from "./chunk.DE3QWY2X.js";
+import {
+  Icon
+} from "./chunk.OQSCGAEY.js";
+
+// src/components/listItem/ListItem.tsx
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import React from "react";
+import {
+  View,
+  Text,
+  Pressable
+} from "react-native";
+var ListItem = React.forwardRef(
+  function ListItem2({
+    label,
+    subtitle,
+    prefix,
+    isLast = false,
+    isFirst = false,
+    suffix,
+    style,
+    inset = false,
+    ...restProps
+  }, ref) {
+    const isLarge = subtitle !== void 0 && subtitle !== "" || suffix !== void 0 || prefix !== void 0 || inset;
+    return <Pressable
+      ref={ref}
+      {...restProps}
+      accessibilityLabel={label}
+      accessible
+      style={[
+        style,
+        styles.container,
+        isLarge && styles.large,
+        isLast && styles.lastItem,
+        inset && styles.inset,
+        inset && isLast && styles.insetLast,
+        inset && isFirst && styles.insetFirst
+      ]}
+    >
+      {prefix}
+      <View style={{ flex: 1 }}>
+        <Text numberOfLines={1} style={styles.title}>{label}</Text>
+        {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+      </View>
+      {suffix}
+    </Pressable>;
+  }
+);
+var ChevronSuffix = ({ title }) => <View style={{ flexDirection: "row", alignItems: "center" }}>
+  <Text style={{ color: theme.collection["list item"]["end slot"].detail }}>{title}</Text>
+  <Icon
+    color={theme.collection["list item"]["end slot"].chevron}
+    name="chevron-right"
+    size={20}
+  />
+</View>;
+ListItem.ChevronSuffix = ChevronSuffix;
+
+export {
+  ListItem
+};

package/dist/{components/search/SearchField.js → chunks/chunk.KVGKM2JI.js}

@@ -3,9 +3,9 @@ import {
   placeholderTextColor,
   plateformStyles,
   styles
-} from "../../chunks/chunk.MCKLJGG3.js";
+} from "./chunk.7H4YRP4X.js";
 
-// src/components/search/SearchField.tsx
+// src/components/searchField/SearchField.tsx
 import React, { useEffect, useState } from "react";
 import {
   View,
@@ -67,6 +67,7 @@ var SearchField = React.forwardRef(
     </View>;
   }
 );
+
 export {
   SearchField
 };

package/dist/chunks/chunk.LN5IVTGU.js

@@ -0,0 +1,60 @@
+import {
+  radioContainerStyles,
+  radioDotStyles
+} from "./chunk.YWEWQ2LT.js";
+
+// src/components/radio/Radio.tsx
+import React, { useEffect, useState } from "react";
+import { Pressable, View } from "react-native";
+var Radio = React.forwardRef(function Checkbox({
+  value = false,
+  disabled = false,
+  onValueChange,
+  style: styleProps,
+  ...restProps
+}, ref) {
+  const [checked, setChecked] = useState(value);
+  useEffect(
+    function onValueUpdate() {
+      setChecked(value);
+    },
+    [value]
+  );
+  function handlePress() {
+    if (disabled || checked) {
+      return;
+    }
+    onValueChange?.(true);
+    setChecked(true);
+  }
+  return <Pressable
+    ref={ref}
+    {...restProps}
+    accessibilityLabel="radio"
+    accessibilityRole="radio"
+    accessibilityState={{ checked, disabled }}
+    accessible
+    aria-checked={checked}
+    aria-disabled={disabled}
+    aria-pressed={checked}
+    onPress={handlePress}
+    hitSlop={14}
+    role="radio"
+    style={[
+      styleProps,
+      radioContainerStyles.default,
+      checked && radioContainerStyles.active,
+      disabled && radioContainerStyles.disabled
+    ]}
+  >{checked && <View
+    style={[
+      radioDotStyles.default,
+      checked && radioDotStyles.active,
+      disabled && radioDotStyles.disabled
+    ]}
+  />}</Pressable>;
+});
+
+export {
+  Radio
+};

package/dist/chunks/chunk.LR5V6SDZ.js

@@ -0,0 +1,22 @@
+import {
+  listCaptionStyles
+} from "./chunk.TWXAL56H.js";
+
+// src/components/listCaption/ListCaption.tsx
+import React from "react";
+import { View, Text } from "react-native";
+var ListCaption = React.forwardRef(
+  function ListCaption2({ style, children, ...restProps }, ref) {
+    return <View
+      ref={ref}
+      {...restProps}
+      accessibilityRole="text"
+      accessible
+      style={[style, listCaptionStyles.container]}
+    ><Text style={[listCaptionStyles.text]}>{children}</Text></View>;
+  }
+);
+
+export {
+  ListCaption
+};