@ds-autonomie/react-native 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @ds-autonomie/react-native
 
+## 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
+
+- 711b710: `checkbox`: implémentation du composant
+- 74a9815: `button`: implementation du composant Button
+- a6fe29e: `TextInput`: implémentation du composant
+- e09d454: `Radio`: implémentation du composant
+- 544c8c7: `searchField`: implementation du composant SearchField
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/chunks/chunk.3QXPJAHY.js

@@ -0,0 +1,22 @@
+import {
+  fonts
+} from "./chunk.4SSEOHVB.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.4MPJJ7EN.js

@@ -0,0 +1,65 @@
+import {
+  styles
+} from "./chunk.INEDXDER.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/chunks/chunk.4SSEOHVB.js

@@ -0,0 +1,41 @@
+// 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
+  }
+});
+
+export {
+  fonts
+};

package/dist/chunks/chunk.4ZX27FCY.js

@@ -0,0 +1,21 @@
+import {
+  fonts
+} from "./chunk.4SSEOHVB.js";
+
+// src/components/listCaption/ListCaption.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var listCaptionStyles = StyleSheet.create({
+  container: {
+    paddingHorizontal: theme.primitives.spacing[16],
+    paddingTop: theme.primitives.spacing[12]
+  },
+  text: {
+    ...fonts.labelMedium,
+    paddingHorizontal: theme.primitives.spacing[16]
+  }
+});
+
+export {
+  listCaptionStyles
+};

package/dist/chunks/chunk.6DY4BFMZ.js

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

package/dist/chunks/chunk.73S52VD6.js

@@ -0,0 +1,94 @@
+import {
+  getCursorColors,
+  inputWrapperStyles,
+  styles
+} from "./chunk.CIHQLL6Y.js";
+import {
+  Icon
+} from "./chunk.OQSCGAEY.js";
+
+// src/components/textInput/TextInput.tsx
+import React, { useState } from "react";
+import {
+  TextInput as NativeTextInput,
+  View,
+  Text
+} from "react-native";
+var TextInput = React.forwardRef(function TextInput2({
+  label,
+  required = false,
+  error = false,
+  errorText,
+  disabled = false,
+  readOnly = false,
+  helpText,
+  style,
+  onFocus,
+  onBlur,
+  multiline,
+  maxLength,
+  value,
+  testID,
+  ...props
+}, ref) {
+  const [isFocused, setIsFocused] = useState(false);
+  return <View
+    style={[style, styles.container]}
+    accessibilityState={{ disabled }}
+    testID={`${testID}/container`}
+  >
+    <View style={styles.header}>
+      {label !== void 0 && label.length > 0 && <Text
+        nativeID="label"
+        testID={`${testID}/label`}
+        style={styles.label}
+      >
+        {required && <Text style={styles.labelRequired}>* </Text>}
+        {label}
+      </Text>}
+      {maxLength !== void 0 && <Text style={styles.counter} testID={`${testID}/counter`}>
+        {value.length}
+        {"/"}
+        {maxLength}
+      </Text>}
+    </View>
+    <View
+      style={[
+        inputWrapperStyles.default,
+        isFocused && inputWrapperStyles.focused,
+        error && inputWrapperStyles.error,
+        readOnly && inputWrapperStyles.readonly,
+        disabled && inputWrapperStyles.disabled
+      ]}
+    ><NativeTextInput
+      aria-label={label}
+      aria-labelby="label"
+      testID={`${testID}/input`}
+      {...props}
+      ref={ref}
+      value={value}
+      multiline={multiline}
+      maxLength={maxLength}
+      style={styles.input}
+      {...getCursorColors(error)}
+      onFocus={(e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+      }}
+      editable={!(readOnly || disabled)}
+    /></View>
+    {error && errorText !== void 0 && <View style={[styles.bottomMessage]} testID={`${testID}/errorText`}>
+      <Icon name="error" style={styles.errorIcon} />
+      <Text style={styles.errorText}>{errorText}</Text>
+    </View>}
+    {helpText !== void 0 && <View style={[styles.bottomMessage]} testID={`${testID}/helpText`}><Text style={styles.helpText}>{helpText}</Text></View>}
+  </View>;
+});
+
+export {
+  TextInput
+};

package/dist/chunks/chunk.7H4YRP4X.js

@@ -0,0 +1,70 @@
+// src/components/searchField/SearchField.styles.tsx
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+
+// src/utils/device.ts
+import { Platform } from "react-native";
+var isIOS = Platform.OS === "ios";
+var isAndroid = Platform.OS === "android";
+
+// src/components/searchField/SearchField.styles.tsx
+var placeholderTextColor = "#3C3C4399";
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 10,
+    backgroundColor: "#7676801F",
+    padding: theme.primitives.spacing[8],
+    paddingLeft: 0
+  },
+  iOScontainer: {
+    padding: 7,
+    paddingLeft: 0
+  },
+  disabledContainer: {
+    backgroundColor: theme.collection.input.background.disabled
+  },
+  input: {
+    flex: 1
+  },
+  icon: {
+    position: "absolute",
+    left: theme.primitives.spacing[8]
+  },
+  iOSInput: {
+    paddingLeft: 38
+  },
+  androidInput: {
+    paddingLeft: 56
+  },
+  iosIcon: {
+    top: 5,
+    width: 18,
+    height: 18,
+    marginLeft: theme.primitives.spacing[8]
+  },
+  androidIcon: {
+    marginLeft: theme.primitives.spacing[12]
+  }
+});
+var iconStyleByPlateform = {
+  ios: {
+    color: "rgba(60, 60, 67, 0.60)",
+    size: 22,
+    style: [styles.icon, styles.iosIcon]
+  },
+  android: {
+    color: "#000000",
+    style: [styles.icon, styles.androidIcon],
+    size: 24
+  }
+};
+var plateformStyles = isIOS ? iconStyleByPlateform.ios : iconStyleByPlateform.android;
+
+export {
+  isIOS,
+  placeholderTextColor,
+  styles,
+  plateformStyles
+};

package/dist/chunks/{chunk.NNC6C337.js → chunk.B2JV2E47.js}

@@ -1,10 +1,10 @@
-import {
-  Icon
-} from "./chunk.4EJ4MEUR.js";
 import {
   getToggleStyle,
   styles
 } from "./chunk.CZ5Y2AVH.js";
+import {
+  Icon
+} from "./chunk.OQSCGAEY.js";
 
 // src/components/toggle/Toggle.tsx
 import React, { useEffect, useState } from "react";

package/dist/chunks/chunk.CIHQLL6Y.js

@@ -0,0 +1,93 @@
+import {
+  fonts
+} from "./chunk.4SSEOHVB.js";
+
+// src/components/textInput/TextInput.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flex: 1
+  },
+  header: {
+    marginBottom: theme.primitives.spacing["8"],
+    display: "flex",
+    flexDirection: "row"
+  },
+  label: {
+    ...fonts.bodyLarge,
+    color: theme.collection.input.title
+  },
+  counter: {
+    marginLeft: "auto",
+    ...fonts.bodyLarge,
+    color: theme.collection.input.title
+  },
+  labelRequired: {
+    color: theme.collection.input["text error"]
+  },
+  input: {
+    paddingTop: theme.primitives.spacing["16"],
+    paddingBottom: theme.primitives.spacing["16"],
+    paddingRight: theme.primitives.spacing["16"],
+    paddingLeft: theme.primitives.spacing["16"],
+    borderRadius: theme.primitives.radius["8"],
+    ...fonts.bodyLarge
+  },
+  bottomMessage: {
+    marginTop: theme.primitives.spacing["8"],
+    display: "flex",
+    flexDirection: "row"
+  },
+  errorText: {
+    color: theme.collection.input["text error"]
+  },
+  errorIcon: {
+    ...fonts.bodyMedium,
+    color: theme.collection.input["text error"],
+    marginTop: 3,
+    marginRight: theme.primitives.spacing["4"]
+  },
+  helpText: {
+    color: theme.collection.input.hint
+  }
+});
+var inputWrapperStyles = StyleSheet.create({
+  default: {
+    backgroundColor: theme.collection.input.background.default,
+    borderColor: theme.collection.input.border.default,
+    borderWidth: 1,
+    borderRadius: theme.primitives.radius["8"]
+  },
+  focused: {
+    borderColor: theme.collection.input.border.active
+  },
+  error: {
+    borderColor: theme.collection.input.border.error,
+    backgroundColor: theme.collection.input.background.error,
+    color: theme.collection.input.content.error
+  },
+  readonly: {
+    borderColor: theme.collection.input.border["read only"],
+    backgroundColor: theme.collection.input.background["read only"],
+    color: theme.collection.input.content["read only"]
+  },
+  disabled: {
+    borderColor: theme.collection.input.border.disabled,
+    backgroundColor: theme.collection.input.background.disabled,
+    color: theme.collection.input.content.disabled
+  }
+});
+function getCursorColors(error) {
+  return {
+    cursorColor: error ? theme.collection.input.cursor.error : theme.collection.input.cursor.default,
+    selectionColor: error ? theme.collection.input.cursor.error : theme.collection.input.cursor.default
+  };
+}
+
+export {
+  styles,
+  inputWrapperStyles,
+  getCursorColors
+};

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

@@ -0,0 +1,47 @@
+// src/components/checkbox/Checkbox.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var checkboxTheme = theme.collection["toggle item"]["toggle item"].checkbox;
+var checkboxContainerStyles = StyleSheet.create({
+  default: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderRadius: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    borderColor: checkboxTheme.default
+  },
+  error: {
+    borderColor: checkboxTheme.error
+  },
+  disabled: {
+    borderColor: checkboxTheme.disabled
+  },
+  active: {
+    borderColor: checkboxTheme.active
+  }
+});
+var checkboxCheckStyles = StyleSheet.create({
+  default: {
+    width: 20,
+    height: 20,
+    borderRadius: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  disabled: {
+    backgroundColor: checkboxTheme.disabled
+  },
+  error: {
+    backgroundColor: checkboxTheme.error
+  },
+  active: {
+    backgroundColor: checkboxTheme.active
+  }
+});
+
+export {
+  checkboxContainerStyles,
+  checkboxCheckStyles
+};

package/dist/chunks/chunk.INEDXDER.js

@@ -0,0 +1,51 @@
+import {
+  fonts
+} from "./chunk.4SSEOHVB.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
+};