@ds-autonomie/react-native 0.1.0 → 0.2.0

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View } from 'react-native';
+import { PressableProps, StyleProp, ViewStyle } from 'react-native/types';
+type OmittedPressableProps = 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityState' | 'accessible' | 'aria-checked' | 'aria-invalid' | 'aria-disabled' | 'aria-pressed' | 'style' | 'onPress' | 'children' | 'role';
+export type CheckboxProps = {
+    /**
+     * When set to `true`, component is checked.
+     */
+    value?: boolean;
+    /**
+     * When set to `true`, component is in error.
+     */
+    error?: boolean;
+    /**
+     * When set to `true`, component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback when component is checked.
+     *
+     * @param {boolean} value
+     */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * If `style` is defined, it will extend the container style.
+     * If a similar property is defined, the new property will be ignored.
+     * * */
+    style?: StyleProp<ViewStyle>;
+} & Omit<PressableProps, OmittedPressableProps>;
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    /**
+     * When set to `true`, component is checked.
+     */
+    value?: boolean | undefined;
+    /**
+     * When set to `true`, component is in error.
+     */
+    error?: boolean | undefined;
+    /**
+     * When set to `true`, component is disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Callback when component is checked.
+     *
+     * @param {boolean} value
+     */
+    onValueChange?: ((value: boolean) => void) | undefined;
+    /**
+     * If `style` is defined, it will extend the container style.
+     * If a similar property is defined, the new property will be ignored.
+     * * */
+    style?: StyleProp<ViewStyle>;
+} & Omit<PressableProps, OmittedPressableProps> & React.RefAttributes<View>>;
+export {};

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,71 @@
+import {
+  checkboxCheckStyles,
+  checkboxContainerStyles
+} from "../../chunks/chunk.H2AL2E3A.js";
+import {
+  Icon
+} from "../../chunks/chunk.OQSCGAEY.js";
+
+// src/components/checkbox/Checkbox.tsx
+import theme from "@ds-autonomie/assets/js/dsa-theme";
+import React, { useEffect, useState } from "react";
+import { Pressable, View } from "react-native";
+var Checkbox = React.forwardRef(function Checkbox2({
+  value = false,
+  disabled = false,
+  error = false,
+  onValueChange,
+  style: styleProps,
+  ...restProps
+}, ref) {
+  const [checked, setChecked] = useState(value);
+  useEffect(
+    function onValueUpdate() {
+      setChecked(value);
+    },
+    [value]
+  );
+  function handlePress() {
+    if (disabled) {
+      return;
+    }
+    onValueChange?.(!checked);
+    setChecked(!checked);
+  }
+  return <Pressable
+    ref={ref}
+    {...restProps}
+    accessibilityLabel="checkbox"
+    accessibilityRole="checkbox"
+    accessibilityState={{ checked, disabled }}
+    accessible
+    aria-checked={checked}
+    aria-disabled={disabled}
+    aria-invalid={error}
+    aria-pressed={checked}
+    onPress={handlePress}
+    role="checkbox"
+    hitSlop={15}
+    style={[
+      styleProps,
+      checkboxContainerStyles.default,
+      checked && checkboxContainerStyles.active,
+      error && checkboxContainerStyles.error,
+      disabled && checkboxContainerStyles.disabled
+    ]}
+  >{checked && <View
+    style={[
+      checkboxCheckStyles.default,
+      checked && checkboxCheckStyles.active,
+      error && checkboxCheckStyles.error,
+      disabled && checkboxCheckStyles.disabled
+    ]}
+  ><Icon
+    name="check"
+    color={theme.primitives.color.neutral[100]}
+    size={18}
+  /></View>}</Pressable>;
+});
+export {
+  Checkbox
+};

package/dist/components/checkbox/Checkbox.styles.d.ts

@@ -0,0 +1,38 @@
+export declare const checkboxContainerStyles: {
+    default: {
+        width: number;
+        height: number;
+        borderWidth: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+        borderColor: "#666666ff";
+    };
+    error: {
+        borderColor: "#dd1708ff";
+    };
+    disabled: {
+        borderColor: "#d7d7d7ff";
+    };
+    active: {
+        borderColor: "#540abdff";
+    };
+};
+export declare const checkboxCheckStyles: {
+    default: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    disabled: {
+        backgroundColor: "#d7d7d7ff";
+    };
+    error: {
+        backgroundColor: "#dd1708ff";
+    };
+    active: {
+        backgroundColor: "#540abdff";
+    };
+};

package/dist/components/checkbox/Checkbox.styles.js

@@ -0,0 +1,8 @@
+import {
+  checkboxCheckStyles,
+  checkboxContainerStyles
+} from "../../chunks/chunk.H2AL2E3A.js";
+export {
+  checkboxCheckStyles,
+  checkboxContainerStyles
+};

package/dist/components/icon/Icon.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
-export interface IconProps {
+import { IconProps as MaterialIconProps } from 'react-native-vector-icons/Icon';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+export type IconProps = {
     name: string;
     size?: number;
-    color: string;
-}
-export declare function Icon({ size, ...restProps }: IconProps): React.JSX.Element;
+    color?: string;
+} & MaterialIconProps;
+export declare const Icon: React.ForwardRefExoticComponent<{
+    name: string;
+    size?: number | undefined;
+    color?: string | undefined;
+} & MaterialIconProps & React.RefAttributes<MaterialIcons>>;

package/dist/components/icon/Icon.js

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "../../chunks/chunk.4EJ4MEUR.js";
+} from "../../chunks/chunk.OQSCGAEY.js";
 export {
   Icon
 };

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View } from 'react-native';
+import { PressableProps, StyleProp, ViewStyle } from 'react-native/types';
+type OmittedPressableProps = 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityState' | 'accessible' | 'aria-checked' | 'aria-invalid' | 'aria-disabled' | 'aria-pressed' | 'style' | 'onPress' | 'children' | 'role';
+export type RadioProps = {
+    /**
+     * When set to `true`, component is checked.
+     */
+    value?: boolean;
+    /**
+     * When set to `true`, component is in error.
+     */
+    error?: boolean;
+    /**
+     * When set to `true`, component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback when component is checked.
+     *
+     * @param {boolean} value
+     */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * If `style` is defined, it will extend the container style.
+     * If a similar property is defined, the new property will overwrite the old one.
+     * */
+    style?: StyleProp<ViewStyle>;
+} & Omit<PressableProps, OmittedPressableProps>;
+export declare const Radio: React.ForwardRefExoticComponent<{
+    /**
+     * When set to `true`, component is checked.
+     */
+    value?: boolean | undefined;
+    /**
+     * When set to `true`, component is in error.
+     */
+    error?: boolean | undefined;
+    /**
+     * When set to `true`, component is disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Callback when component is checked.
+     *
+     * @param {boolean} value
+     */
+    onValueChange?: ((value: boolean) => void) | undefined;
+    /**
+     * If `style` is defined, it will extend the container style.
+     * If a similar property is defined, the new property will overwrite the old one.
+     * */
+    style?: StyleProp<ViewStyle>;
+} & Omit<PressableProps, OmittedPressableProps> & React.RefAttributes<View>>;
+export {};

package/dist/components/radio/Radio.js

@@ -0,0 +1,59 @@
+import {
+  radioContainerStyles,
+  radioDotStyles
+} from "../../chunks/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/components/radio/Radio.styles.d.ts

@@ -0,0 +1,30 @@
+export declare const radioContainerStyles: {
+    default: {
+        width: number;
+        height: number;
+        borderWidth: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+        borderColor: "#666666ff";
+    };
+    active: {
+        borderColor: "#540abdff";
+    };
+    disabled: {
+        borderColor: "#d7d7d7ff";
+    };
+};
+export declare const radioDotStyles: {
+    default: {
+        width: number;
+        height: number;
+        borderRadius: number;
+    };
+    disabled: {
+        backgroundColor: "#d7d7d7ff";
+    };
+    active: {
+        backgroundColor: "#540abdff";
+    };
+};

package/dist/components/radio/Radio.styles.js

@@ -0,0 +1,8 @@
+import {
+  radioContainerStyles,
+  radioDotStyles
+} from "../../chunks/chunk.YWEWQ2LT.js";
+export {
+  radioContainerStyles,
+  radioDotStyles
+};

package/dist/components/search/SearchField.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextInput, TextInputProps, StyleProp, ViewProps } from 'react-native';
+type OmittedTextInputProps = Omit<TextInputProps, 'accessibilityLabel' | 'accessibilityRole' | 'editable' | 'returnKeyType' | 'style'>;
+export declare const SearchField: React.ForwardRefExoticComponent<{
+    /**
+     * If `disabled` is `true`, the component is not editable.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If `style` is defined, it will extend the container style.
+     */
+    style?: StyleProp<ViewProps>;
+} & OmittedTextInputProps & React.RefAttributes<TextInput>>;
+export {};

package/dist/components/search/SearchField.js

@@ -0,0 +1,72 @@
+import {
+  isIOS,
+  placeholderTextColor,
+  plateformStyles,
+  styles
+} from "../../chunks/chunk.MCKLJGG3.js";
+
+// src/components/search/SearchField.tsx
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  TextInput
+} from "react-native";
+import Icon from "react-native-vector-icons/MaterialIcons";
+var INIT_PLACEHOLDER = isIOS ? "Recherche" : "Rechercher un...";
+var SearchField = React.forwardRef(
+  function SearchField2({
+    onChangeText,
+    placeholder = INIT_PLACEHOLDER,
+    style,
+    value = "",
+    disabled = false,
+    ...props
+  }, ref) {
+    const [text, setText] = useState(value);
+    useEffect(
+      function onValueUpdate() {
+        setText(value);
+      },
+      [value]
+    );
+    function handleKeypress(text2) {
+      if (disabled) {
+        return;
+      }
+      onChangeText?.(text2);
+      setText(text2);
+    }
+    return <View
+      style={[
+        style,
+        styles.container,
+        isIOS && styles.iOScontainer,
+        disabled && styles.disabledContainer
+      ]}
+    >
+      <Icon
+        name="search"
+        {...plateformStyles}
+        accessibilityRole="button"
+        accessibilityLabel="search"
+      />
+      <TextInput
+        ref={ref}
+        {...props}
+        editable={!disabled}
+        accessibilityLabel="search"
+        accessibilityRole="search"
+        accessibilityState={{ disabled }}
+        onChangeText={handleKeypress}
+        placeholder={placeholder}
+        placeholderTextColor={placeholderTextColor}
+        returnKeyType="search"
+        style={[styles.input, isIOS ? styles.iOSInput : styles.androidInput]}
+        value={text}
+      />
+    </View>;
+  }
+);
+export {
+  SearchField
+};

package/dist/components/search/SearchField.styles.d.ts

@@ -0,0 +1,42 @@
+import { IconProps } from 'react-native-vector-icons/Icon';
+export declare const placeholderTextColor = "#3C3C4399";
+export declare const styles: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        borderRadius: number;
+        backgroundColor: string;
+        padding: 8;
+        paddingLeft: number;
+    };
+    iOScontainer: {
+        padding: number;
+        paddingLeft: number;
+    };
+    disabledContainer: {
+        backgroundColor: "#f7f7f7ff";
+    };
+    input: {
+        flex: number;
+    };
+    icon: {
+        position: "absolute";
+        left: 8;
+    };
+    iOSInput: {
+        paddingLeft: number;
+    };
+    androidInput: {
+        paddingLeft: number;
+    };
+    iosIcon: {
+        top: number;
+        width: number;
+        height: number;
+        marginLeft: 8;
+    };
+    androidIcon: {
+        marginLeft: 12;
+    };
+};
+export declare const plateformStyles: Pick<IconProps, "size" | "color" | "style">;

package/dist/components/search/SearchField.styles.js

@@ -0,0 +1,10 @@
+import {
+  placeholderTextColor,
+  plateformStyles,
+  styles
+} from "../../chunks/chunk.MCKLJGG3.js";
+export {
+  placeholderTextColor,
+  plateformStyles,
+  styles
+};

package/dist/components/text-input/TextInput.d.ts

@@ -0,0 +1,54 @@
+import React, { ReactNode } from 'react';
+import { TextInput as NativeTextInput, TextInputProps as NativeTextInputProps, ViewStyle, StyleProp } from 'react-native';
+export type TextInputProps = {
+    /** The input's label. */
+    label?: string;
+    /** Makes the input a required field. */
+    required?: boolean;
+    /** Indicates whether the input should be in error state. */
+    error?: boolean;
+    /** The input's error text. A string or Text component. */
+    errorText?: ReactNode;
+    /** Disables the input. */
+    disabled?: boolean;
+    /** Makes the input readonly. */
+    readOnly?: boolean;
+    /** The input's help text. A string or Text component. */
+    helpText?: ReactNode;
+    /** Stylise the outer view of the input. */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The value to show for the text input. TextInput is a controlled component,
+     * which means the native value will be forced to match this value prop if provided.
+     * For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same.
+     * In addition to simply setting the same value, either set editable={false},
+     * or set/update maxLength to prevent unwanted edits without flicker.
+     */
+    value: string;
+} & Omit<NativeTextInputProps, 'style' | 'editable' | 'value'>;
+export declare const TextInput: React.ForwardRefExoticComponent<{
+    /** The input's label. */
+    label?: string | undefined;
+    /** Makes the input a required field. */
+    required?: boolean | undefined;
+    /** Indicates whether the input should be in error state. */
+    error?: boolean | undefined;
+    /** The input's error text. A string or Text component. */
+    errorText?: ReactNode;
+    /** Disables the input. */
+    disabled?: boolean | undefined;
+    /** Makes the input readonly. */
+    readOnly?: boolean | undefined;
+    /** The input's help text. A string or Text component. */
+    helpText?: ReactNode;
+    /** Stylise the outer view of the input. */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The value to show for the text input. TextInput is a controlled component,
+     * which means the native value will be forced to match this value prop if provided.
+     * For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same.
+     * In addition to simply setting the same value, either set editable={false},
+     * or set/update maxLength to prevent unwanted edits without flicker.
+     */
+    value: string;
+} & Omit<NativeTextInputProps, "style" | "value" | "editable"> & React.RefAttributes<NativeTextInput>>;

package/dist/components/text-input/TextInput.js

@@ -0,0 +1,8 @@
+import {
+  TextInput
+} from "../../chunks/chunk.2HOUMFYI.js";
+import "../../chunks/chunk.QOZS5EA3.js";
+import "../../chunks/chunk.OQSCGAEY.js";
+export {
+  TextInput
+};

package/dist/components/text-input/TextInput.styles.d.ts

@@ -0,0 +1,86 @@
+export declare const styles: {
+    container: {
+        display: "flex";
+        flex: number;
+    };
+    header: {
+        marginBottom: 8;
+        display: "flex";
+        flexDirection: "row";
+    };
+    label: {
+        color: "#666666ff";
+        fontSize: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+    counter: {
+        color: "#666666ff";
+        fontSize: number;
+        fontFamily: string;
+        letterSpacing: number;
+        marginLeft: "auto";
+    };
+    labelRequired: {
+        color: "#dd1708ff";
+    };
+    input: {
+        fontSize: number;
+        fontFamily: string;
+        letterSpacing: number;
+        paddingTop: 16;
+        paddingBottom: 16;
+        paddingRight: 16;
+        paddingLeft: 16;
+        borderRadius: 8;
+    };
+    bottomMessage: {
+        marginTop: 8;
+        display: "flex";
+        flexDirection: "row";
+    };
+    errorText: {
+        color: "#dd1708ff";
+    };
+    errorIcon: {
+        color: "#dd1708ff";
+        marginTop: number;
+        marginRight: 4;
+        fontSize: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+    helpText: {
+        color: "#252625ff";
+    };
+};
+export declare const inputWrapperStyles: {
+    default: {
+        backgroundColor: "#ffffffff";
+        borderColor: "#e7e7e7ff";
+        borderWidth: number;
+        borderRadius: 8;
+    };
+    focused: {
+        borderColor: "#540abdff";
+    };
+    error: {
+        borderColor: "#dd1708ff";
+        backgroundColor: "#fff5f5ff";
+        color: "#252625ff";
+    };
+    readonly: {
+        borderColor: "#e7e7e7ff";
+        backgroundColor: "#d7d7d7ff";
+        color: "#252625ff";
+    };
+    disabled: {
+        borderColor: "#e7e7e7ff";
+        backgroundColor: "#f7f7f7ff";
+        color: "#8a8c8aff";
+    };
+};
+export declare function getCursorColors(error: boolean): {
+    cursorColor: "#540abdff" | "#dd1708ff";
+    selectionColor: "#540abdff" | "#dd1708ff";
+};

package/dist/components/text-input/TextInput.styles.js

@@ -0,0 +1,10 @@
+import {
+  getCursorColors,
+  inputWrapperStyles,
+  styles
+} from "../../chunks/chunk.QOZS5EA3.js";
+export {
+  getCursorColors,
+  inputWrapperStyles,
+  styles
+};

package/dist/components/toggle/Toggle.js

@@ -1,8 +1,8 @@
 import {
   Toggle
-} from "../../chunks/chunk.NNC6C337.js";
-import "../../chunks/chunk.4EJ4MEUR.js";
+} from "../../chunks/chunk.B2JV2E47.js";
 import "../../chunks/chunk.CZ5Y2AVH.js";
+import "../../chunks/chunk.OQSCGAEY.js";
 export {
   Toggle
 };

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export { Toggle } from './components/toggle/Toggle';
+export * from './components/toggle/Toggle';
+export * from './components/text-input/TextInput';
 export * from './utils';