@ds-autonomie/react-native 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @ds-autonomie/react-native
 
+## 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.2HOUMFYI.js

@@ -0,0 +1,94 @@
+import {
+  getCursorColors,
+  inputWrapperStyles,
+  styles
+} from "./chunk.QOZS5EA3.js";
+import {
+  Icon
+} from "./chunk.OQSCGAEY.js";
+
+// src/components/text-input/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.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.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.MCKLJGG3.js

@@ -0,0 +1,70 @@
+// src/components/search/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/search/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.4EJ4MEUR.js → chunk.OQSCGAEY.js}

@@ -1,14 +1,16 @@
 // src/components/icon/Icon.tsx
+import { forwardRef } from "react";
 import MaterialIcons from "react-native-vector-icons/MaterialIcons";
-function Icon({ size = 16, ...restProps }) {
+var Icon = forwardRef(function Icon2({ size = 16, ...restProps }, ref) {
   return <MaterialIcons
     {...restProps}
+    ref={ref}
     size={size}
     selectable={false}
     importantForAccessibility="no-hide-descendants"
     accessibilityElementsHidden
   />;
-}
+});
 
 export {
   Icon

package/dist/chunks/chunk.QOZS5EA3.js

@@ -0,0 +1,111 @@
+// src/components/text-input/TextInput.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet as StyleSheet2 } from "react-native";
+
+// src/styles/fonts.ts
+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({
+  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 = StyleSheet2.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.RNOZ5AW4.js

@@ -0,0 +1,71 @@
+// src/components/button/Button.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import {
+  StyleSheet
+} from "react-native";
+var variants = Object.keys(
+  theme.collection.button
+);
+var sizes = ["small", "medium"];
+function getIconColor({ pressed, disabled, variant }) {
+  const buttonTheme = theme.collection.button[variant];
+  if (disabled)
+    return buttonTheme["on-disabled"];
+  if (pressed)
+    return buttonTheme["on-pressed"];
+  return buttonTheme["on-enabled"];
+}
+function getContainerStyle({
+  disabled,
+  hasOnlyOneIcon,
+  pressed,
+  size,
+  variant
+}) {
+  const isMedium = size === "medium";
+  const isLink = variant === "link";
+  const state = disabled ? "disabled" : pressed ? "pressed" : "enabled";
+  const verticalPadding = theme.primitives.spacing[isMedium ? 16 : 8];
+  const horizontalPadding = hasOnlyOneIcon ? theme.primitives.spacing[isMedium ? 16 : 8] : theme.primitives.spacing[isMedium ? 24 : 16];
+  return StyleSheet.create({
+    container: {
+      position: "relative",
+      flexDirection: "row",
+      alignItems: "center",
+      borderRadius: theme.primitives.radius[8],
+      paddingLeft: horizontalPadding,
+      paddingRight: horizontalPadding,
+      paddingTop: verticalPadding,
+      paddingBottom: verticalPadding,
+      gap: theme.primitives.spacing[isMedium ? 8 : 4],
+      backgroundColor: isLink ? void 0 : theme.collection.button[variant][state],
+      opacity: !isLink && disabled ? 0.4 : void 0
+    }
+  }).container;
+}
+function getTextStyle({
+  disabled,
+  pressed,
+  size,
+  variant
+}) {
+  const isMedium = size === "medium";
+  const state = disabled ? "disabled" : pressed ? "pressed" : "enabled";
+  return StyleSheet.create({
+    text: {
+      fontFamily: "Cabin-Regular",
+      fontWeight: "700",
+      fontSize: isMedium ? 16 : 14,
+      letterSpacing: isMedium ? 0.5 : 0.25,
+      color: theme.collection.button[variant][`on-${state}`]
+    }
+  }).text;
+}
+
+export {
+  variants,
+  sizes,
+  getIconColor,
+  getContainerStyle,
+  getTextStyle
+};

package/dist/chunks/chunk.YWEWQ2LT.js

@@ -0,0 +1,39 @@
+// src/components/radio/Radio.styles.ts
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import { StyleSheet } from "react-native";
+var radioTheme = theme.collection["toggle item"]["toggle item"].radio;
+var radioContainerStyles = StyleSheet.create({
+  default: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    borderColor: radioTheme.default
+  },
+  active: {
+    borderColor: radioTheme.active
+  },
+  disabled: {
+    borderColor: radioTheme.disabled
+  }
+});
+var radioDotStyles = StyleSheet.create({
+  default: {
+    width: 10,
+    height: 10,
+    borderRadius: 20
+  },
+  disabled: {
+    backgroundColor: radioTheme.disabled
+  },
+  active: {
+    backgroundColor: radioTheme.active
+  }
+});
+
+export {
+  radioContainerStyles,
+  radioDotStyles
+};

package/dist/components/button/Button.d.ts

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, PressableProps, View } from 'react-native';
+import { Size, Variant } from './Button.styles';
+type OmittedPressableProps = 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityState' | 'accessible' | 'aria-disabled' | 'children' | 'disabled' | 'role' | 'style';
+export type ButtonProps = {
+    /**
+     * Variant of button.
+     */
+    variant?: Variant;
+    /**
+     * If `style` is defined, it will extend the container style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Text displayed in button.
+     */
+    children?: ReactNode;
+    /**
+     * Name of element placed before the title.
+     */
+    startIcon?: string;
+    /**
+     * Name of element placed after the title.
+     */
+    endIcon?: string;
+    /**
+     * The size of the component.
+     */
+    size?: Size;
+    /**
+     * Disabled the button.
+     */
+    disabled?: boolean;
+} & Omit<PressableProps, OmittedPressableProps>;
+export declare const Button: React.ForwardRefExoticComponent<{
+    /**
+     * Variant of button.
+     */
+    variant?: "link" | "primary" | "secondary" | "tertiary" | "destructive" | undefined;
+    /**
+     * If `style` is defined, it will extend the container style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Text displayed in button.
+     */
+    children?: ReactNode;
+    /**
+     * Name of element placed before the title.
+     */
+    startIcon?: string | undefined;
+    /**
+     * Name of element placed after the title.
+     */
+    endIcon?: string | undefined;
+    /**
+     * The size of the component.
+     */
+    size?: Size | undefined;
+    /**
+     * Disabled the button.
+     */
+    disabled?: boolean | undefined;
+} & Omit<PressableProps, OmittedPressableProps> & React.RefAttributes<View>>;
+export {};

package/dist/components/button/Button.js

@@ -0,0 +1,68 @@
+import {
+  getContainerStyle,
+  getIconColor,
+  getTextStyle
+} from "../../chunks/chunk.RNOZ5AW4.js";
+import {
+  Icon
+} from "../../chunks/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/components/button/Button.styles.d.ts

@@ -0,0 +1,38 @@
+import theme from '@ds-autonomie/assets/js/dsa-theme';
+import { PressableStateCallbackType } from 'react-native';
+import { ButtonProps } from './Button';
+export type Variant = keyof typeof theme.collection.button;
+export declare const variants: Variant[];
+export type Size = 'small' | 'medium';
+export declare const sizes: Size[];
+type State = {
+    pressed: PressableStateCallbackType['pressed'];
+    disabled: ButtonProps['disabled'];
+    variant: Variant;
+};
+export declare function getIconColor({ pressed, disabled, variant }: State): "#540abdff" | "#ffffffff";
+type GetStylesProps = {
+    hasOnlyOneIcon: boolean;
+    size: Size;
+} & State;
+export declare function getContainerStyle({ disabled, hasOnlyOneIcon, pressed, size, variant, }: GetStylesProps): {
+    position: "relative";
+    flexDirection: "row";
+    alignItems: "center";
+    borderRadius: 8;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+    gap: 4 | 8;
+    backgroundColor: "#ede4faff" | "#cbb0ecff" | "#540abdff" | "#451292ff" | "#ffffffff" | "#dd1708ff" | "#530000ff" | undefined;
+    opacity: number | undefined;
+};
+export declare function getTextStyle({ disabled, pressed, size, variant, }: GetStylesProps): {
+    fontFamily: string;
+    fontWeight: "700";
+    fontSize: number;
+    letterSpacing: number;
+    color: "#540abdff" | "#ffffffff";
+};
+export {};

package/dist/components/button/Button.styles.js

@@ -0,0 +1,14 @@
+import {
+  getContainerStyle,
+  getIconColor,
+  getTextStyle,
+  sizes,
+  variants
+} from "../../chunks/chunk.RNOZ5AW4.js";
+export {
+  getContainerStyle,
+  getIconColor,
+  getTextStyle,
+  sizes,
+  variants
+};