@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/FormControl/FormControl.stories.d.ts

@@ -5,47 +5,109 @@ declare const _default: {
     description: string;
     component: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode | undefined;
-    } & {
+    } & Pick<import("./FormControlHint").FormControlHintProps, "hint"> & import("./FormControlCaption").FormControlCaptionProps & Pick<import("./FormControlLabel").FormControlLabelProps, "labelRight"> & {
+        label?: string;
+        disabled?: boolean;
+        required?: boolean;
         style?: import("../..").BoxProps["style"];
     } & import("react").RefAttributes<import("react-native").TextInput>>;
     styleFn: () => {
-        formControl: {
+        caption: {
             display: "flex";
-            flexDirection: "column";
+            flexDirection: "row";
             gap: string | number;
+            alignItems: "flex-start";
+            marginTop: string | number;
             width: "100%";
         };
-        labelContainer: {
-            display: "flex";
-            flexDirection: "row";
-            justifyContent: "space-between";
+        captionIcon: {
+            flexShrink: number;
+            marginTop: number;
         };
-        label: {
-            color: string;
-            fontSize: 14;
+        captionText: {
+            flex: number;
+            flexShrink: number;
+            minWidth: number;
+            fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        labelDisabled: {
+        errorText: {
             color: string;
         };
-        hintContainer: {
+        successText: {
+            color: string;
+        };
+        modalOverlay: {
+            flex: number;
+            backgroundColor: string;
+        };
+        modalSheet: {
+            width: "100%";
+            flex: number;
+        };
+        modalContent: {
+            flex: number;
+            backgroundColor: "#FFFFFF";
+            borderTopLeftRadius: import("@alveole/theme").Radius;
+            borderTopRightRadius: import("@alveole/theme").Radius;
+            padding: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+        };
+        modalHeader: {
             display: "flex";
             flexDirection: "row";
             justifyContent: "space-between";
+            alignItems: "center";
+            marginBottom: string | number;
         };
-        hint: {
+        modalHeaderLeft: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        modalHeaderRight: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        modalFooter: {
+            marginTop: string | number;
+        };
+        modalInputContainer: {
+            borderRadius: import("@alveole/theme").Radius;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: "#FFFFFF";
+            minHeight: number;
+        };
+        modalInput: {
             color: string;
-            fontSize: 12;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            minHeight: number;
+            flex: number;
+            fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        hintDisabled: {
-            color: string;
+        inputFocused: import("@alveole/theme").FocusBorderStyle;
+        inputError: {
+            borderColor: string;
+        };
+        inputSuccess: {
+            borderColor: string;
+        };
+        inputDisabled: {
+            backgroundColor: string;
+            borderColor: string;
         };
         inputContainer: {
             width: "100%";
@@ -55,7 +117,7 @@ declare const _default: {
             flexDirection: "row";
             gap: string | number;
             padding: number;
-            borderRadius: number;
+            borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
             borderColor: string;
             backgroundColor: "#FFFFFF";
@@ -72,30 +134,11 @@ declare const _default: {
             fontSize: 14;
             marginTop: string | number;
             marginBottom: string | number;
-            paddingLeft: string | number;
-            paddingRight: string | number;
+            paddingLeft: number;
+            paddingRight: number;
             minHeight: number | undefined;
             flex: number;
         };
-        inputError: {
-            borderColor: string;
-        };
-        inputSuccess: {
-            borderColor: string;
-        };
-        inputDisabled: {
-            borderColor: string;
-        };
-        inputFocused: {
-            outlineStyle: "solid";
-            outlineWidth: number;
-            outlineColor: string;
-            outlineOffset: number;
-            borderColor: string | undefined;
-        };
-        inputFile: {
-            margin: number;
-        };
         inputFileText: {
             fontSize: 14;
             lineHeight: 20;
@@ -104,108 +147,55 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
             color: string;
         };
-        inputFileClear: {
-            position: "absolute";
-            right: number;
-        };
-        inputFileIcon: {
-            marginTop: string;
-            marginBottom: string;
-        };
         inputWeb: {
             borderWidth: number;
             borderStyle: "none";
             outline: string;
             backgroundColor: "transparent";
             lineHeight: string;
+            height: 20;
+            paddingTop: number;
+            paddingBottom: number;
         };
-        modalOverlay: {
-            flex: number;
-            backgroundColor: string;
-        };
-        modalSheet: {
+        formControl: {
+            display: "flex";
+            flexDirection: "column";
+            gap: string | number;
             width: "100%";
-            flex: number;
         };
-        modalContent: {
-            flex: number;
-            backgroundColor: "#FFFFFF";
-            borderTopLeftRadius: number;
-            borderTopRightRadius: number;
-            padding: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-        };
-        modalHeader: {
+        labelContainer: {
             display: "flex";
             flexDirection: "row";
             justifyContent: "space-between";
-            alignItems: "center";
-            marginBottom: string | number;
-        };
-        modalHeaderLeft: {
-            display: "flex";
-            flexDirection: "row";
-            alignItems: "center";
-        };
-        modalHeaderRight: {
-            display: "flex";
-            flexDirection: "row";
-            alignItems: "center";
-        };
-        modalFooter: {
-            marginTop: string | number;
         };
-        modalInputContainer: {
-            borderRadius: number;
-            borderWidth: number;
-            borderColor: string;
-            backgroundColor: "#FFFFFF";
-            minHeight: number;
-        };
-        modalInput: {
+        label: {
             color: string;
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-            minHeight: number;
-            flex: number;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        caption: {
+        labelDisabled: {
+            color: string;
+        };
+        hintContainer: {
             display: "flex";
             flexDirection: "row";
-            gap: string | number;
-            alignItems: "flex-start";
-            marginTop: string | number;
-            width: "100%";
-        };
-        captionIcon: {
-            flexShrink: number;
-            marginTop: number;
+            justifyContent: "space-between";
         };
-        captionText: {
-            flex: number;
-            flexShrink: number;
-            minWidth: number;
+        hint: {
+            color: string;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        errorText: {
-            color: string;
-        };
-        successText: {
+        hintDisabled: {
             color: string;
         };
-        optionalText: {
+        requiredMarker: {
             color: string;
             marginLeft: string | number;
             fontSize: 14;
@@ -220,15 +210,10 @@ export default _default;
 export declare const WithTextInput: () => import("react").JSX.Element;
 export declare const WithError: () => import("react").JSX.Element;
 export declare const WithSuccess: () => import("react").JSX.Element;
-export declare const Multiline: () => import("react").JSX.Element;
-export declare const MultilineWithModal: () => import("react").JSX.Element;
 export declare const Label: () => import("react").JSX.Element;
 export declare const Caption: () => import("react").JSX.Element;
 export declare const Hint: () => import("react").JSX.Element;
 export declare const Modal: () => import("react").JSX.Element;
-export declare const NumberInput: () => import("react").JSX.Element;
 export declare const DateInput: () => import("react").JSX.Element;
-export declare const FileInput: () => import("react").JSX.Element;
-export declare const OtpInput: () => import("react").JSX.Element;
 export * as Sources from './FormControl.stories.sources';
 //# sourceMappingURL=FormControl.stories.d.ts.map

package/dist/ui/FormControl/FormControl.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,wBAOkB;AAElB,eAAO,MAAM,aAAa,mCAQzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAQrB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAQvB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAOrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAiB9B,CAAC;AAEF,eAAO,MAAM,KAAK,mCAQjB,CAAC;AAEF,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,eAAO,MAAM,IAAI,mCAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAejB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAqCvB,CAAC;AAEF,eAAO,MAAM,SAAS,mCA0BrB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAwBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAWpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"FormControl.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,wBAOkB;AAElB,eAAO,MAAM,aAAa,mCAQzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAQrB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAQvB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,eAAO,MAAM,IAAI,mCAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAejB,CAAC;AAEF,eAAO,MAAM,SAAS,mCA0BrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}

package/dist/ui/FormControl/FormControl.stories.js

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box, Typography } from '../../core';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { Button } from '../Button';
 import { InputHeading } from '../InputHeading';
 import { FormControl } from './FormControl';
 import { useStyles } from './FormControl.styles';
 import { FormControlCaption } from './FormControlCaption';
 import { FormControlDateInput } from './FormControlDateInput';
-import { FormControlFileInput } from './FormControlFileInput';
 import { FormControlHint } from './FormControlHint';
 import { FormControlLabel } from './FormControlLabel';
 import { FormControlModal } from './FormControlModal';
-import { FormControlNumberInput } from './FormControlNumberInput';
-import { FormControlOtpInput } from './FormControlOtpInput';
 import { TextInput } from './TextInput';
 export default {
     title: 'FormControl',
@@ -22,37 +20,20 @@ export default {
     component: FormControl,
     styleFn: useStyles,
 };
-export const WithTextInput = () => (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [_jsx(FormControlLabel, { label: "Adresse email" }), _jsx(FormControlHint, { hint: "Votre email professionnel" })] }), _jsx(TextInput, { placeholder: "jean@exemple.fr", keyboardType: "email-address" })] }));
-export const WithError = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Adresse email", error: "Format invalide" }) }), _jsx(TextInput, { placeholder: "jean@exemple.fr" }), _jsx(FormControlCaption, { error: "Format invalide" })] }));
-export const WithSuccess = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Adresse email", success: "Email valide" }) }), _jsx(TextInput, { placeholder: "jean@exemple.fr" }), _jsx(FormControlCaption, { success: "Email valide" })] }));
-export const Multiline = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Message" }) }), _jsx(TextInput, { placeholder: "Votre message...", multiline: true, numberOfLines: 4 })] }));
-export const MultilineWithModal = () => {
-    const [text, setText] = useState('');
-    return (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Description" }) }), _jsx(TextInput, { value: text, onChangeText: setText, placeholder: "Taper pour ouvrir la modale de saisie...", multiline: true, openModal: true, modalSubmitLabel: "Confirmer" })] }));
-};
-export const Label = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlLabel, { label: "Label par defaut" }), _jsx(FormControlLabel, { label: "Desactive", disabled: true }), _jsx(FormControlLabel, { label: "Erreur", error: "Message erreur" }), _jsx(FormControlLabel, { label: "Succes", success: "Message succes" }), _jsx(FormControlLabel, { label: "Avec badge", labelRight: _jsx(Typography, { children: "Optionnel" }) })] }));
+export const WithTextInput = () => (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [_jsx(FormControlLabel, { label: "Adresse email" }), _jsx(FormControlHint, { hint: "Votre email professionnel" })] }), _jsx(TextInput, { placeholder: "jean@exemple.fr" })] }));
+export const WithError = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Adresse email" }) }), _jsx(TextInput, { placeholder: "jean@exemple.fr" }), _jsx(FormControlCaption, { error: "Format invalide" })] }));
+export const WithSuccess = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Adresse email" }) }), _jsx(TextInput, { placeholder: "jean@exemple.fr" }), _jsx(FormControlCaption, { success: "Email valide" })] }));
+export const Label = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlLabel, { label: "Label par defaut" }), _jsx(FormControlLabel, { label: "Desactive", disabled: true }), _jsx(FormControlLabel, { label: "Avec badge", labelRight: _jsx(Typography, { children: "Optionnel" }) })] }));
 export const Caption = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlCaption, { error: "Champ requis" }), _jsx(FormControlCaption, { success: "Valeur correcte" })] }));
 export const Hint = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlHint, { hint: "Texte descriptif du champ" }), _jsx(FormControlHint, { hint: "Texte desactive", disabled: true })] }));
 export const Modal = () => {
     const [open, setOpen] = useState(false);
     return (_jsxs(Box, { children: [_jsx(Button, { variant: "secondary", title: "Ouvrir la modale", onPress: () => setOpen(true) }), _jsx(FormControlModal, { open: open, onClose: () => setOpen(false), submitLabel: "Valider", onSubmit: () => setOpen(false), children: _jsx(TextInput, { placeholder: "Saisir un texte...", multiline: true, numberOfLines: 6 }) })] }));
 };
-export const NumberInput = () => {
-    const [value, setValue] = useState(null);
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Montant" }) }), _jsx(FormControlNumberInput, { value: value, onChange: setValue, placeholder: "0" })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Avec unites" }) }), _jsx(FormControlNumberInput, { value: value, onChange: setValue, startAdornment: _jsx(Box, { style: { paddingLeft: 8, paddingRight: 4 }, children: _jsx(Typography, { children: "\u20AC" }) }), endAdornment: _jsx(Box, { style: { paddingLeft: 4, paddingRight: 8 }, children: _jsx(Typography, { children: "TTC" }) }) })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Desactive" }) }), _jsx(FormControlNumberInput, { value: 42, onChange: () => { }, disabled: true })] })] }));
-};
 export const DateInput = () => {
     const [date, setDate] = useState('');
     const [time, setTime] = useState('');
     const [month, setMonth] = useState('');
     return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Date" }) }), _jsx(FormControlDateInput, { type: "date", value: date, onChange: setDate })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Heure" }) }), _jsx(FormControlDateInput, { type: "time", value: time, onChange: setTime })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Mois" }) }), _jsx(FormControlDateInput, { type: "month", value: month, onChange: setMonth })] })] }));
 };
-export const FileInput = () => {
-    const [file, setFile] = useState(null);
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Piece jointe" }) }), _jsx(FormControlFileInput, { value: file, onChange: setFile })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Plusieurs fichiers" }) }), _jsx(FormControlFileInput, { value: file, onChange: setFile, multiple: true })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Desactive", disabled: true }) }), _jsx(FormControlFileInput, { value: null, onChange: () => { }, disabled: true })] })] }));
-};
-export const OtpInput = () => {
-    const [code, setCode] = useState('');
-    return (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Code de verification" }) }), _jsx(FormControlOtpInput, { numberOfDigits: 6, onTextChange: setCode }), code.length === 6 && _jsx(FormControlCaption, { success: `Code saisi : ${code}` })] }));
-};
 export * as Sources from './FormControl.stories.sources';

package/dist/ui/FormControl/FormControl.stories.sources.d.ts

@@ -1,30 +1,20 @@
 export declare const WithTextInput: () => string;
 export declare const WithError: () => string;
 export declare const WithSuccess: () => string;
-export declare const Multiline: () => string;
-export declare const MultilineWithModal: () => string;
 export declare const Label: () => string;
 export declare const Caption: () => string;
 export declare const Hint: () => string;
 export declare const Modal: () => string;
-export declare const NumberInput: () => string;
 export declare const DateInput: () => string;
-export declare const FileInput: () => string;
-export declare const OtpInput: () => string;
 export declare const storySources: {
     readonly WithTextInput: () => string;
     readonly WithError: () => string;
     readonly WithSuccess: () => string;
-    readonly Multiline: () => string;
-    readonly MultilineWithModal: () => string;
     readonly Label: () => string;
     readonly Caption: () => string;
     readonly Hint: () => string;
     readonly Modal: () => string;
-    readonly NumberInput: () => string;
     readonly DateInput: () => string;
-    readonly FileInput: () => string;
-    readonly OtpInput: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=FormControl.stories.sources.d.ts.map

package/dist/ui/FormControl/FormControl.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAAmU,CAAC;AAE9V,eAAO,MAAM,SAAS,cAAkT,CAAC;AAEzU,eAAO,MAAM,WAAW,cAAkT,CAAC;AAE3U,eAAO,MAAM,SAAS,cAAyP,CAAC;AAEhR,eAAO,MAAM,kBAAkB,cAA6d,CAAC;AAE7f,eAAO,MAAM,KAAK,cAAsc,CAAC;AAEzd,eAAO,MAAM,OAAO,cAA8N,CAAC;AAEnP,eAAO,MAAM,IAAI,cAAuO,CAAC;AAEzP,eAAO,MAAM,KAAK,cAA2f,CAAC;AAE9gB,eAAO,MAAM,WAAW,cAA8sC,CAAC;AAEvuC,eAAO,MAAM,SAAS,cAA65B,CAAC;AAEp7B,eAAO,MAAM,SAAS,cAA+2B,CAAC;AAEt4B,eAAO,MAAM,QAAQ,cAAyZ,CAAC;AAE/a,eAAO,MAAM,YAAY;;;;;;;;;;;;;;CAcf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"FormControl.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAAoS,CAAC;AAE/T,eAAO,MAAM,SAAS,cAAwR,CAAC;AAE/S,eAAO,MAAM,WAAW,cAAyR,CAAC;AAElT,eAAO,MAAM,KAAK,cAA4T,CAAC;AAE/U,eAAO,MAAM,OAAO,cAA8N,CAAC;AAEnP,eAAO,MAAM,IAAI,cAAuO,CAAC;AAEzP,eAAO,MAAM,KAAK,cAA2f,CAAC;AAE9gB,eAAO,MAAM,SAAS,cAA65B,CAAC;AAEp7B,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/FormControl/FormControl.stories.sources.js

@@ -1,30 +1,20 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/FormControl/FormControl.stories.tsx
-export const WithTextInput = () => "export const WithTextInput = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" />\n      <FormControlHint hint=\"Votre email professionnel\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" keyboardType=\"email-address\" />\n  </FormControl>\n);";
-export const WithError = () => "export const WithError = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" error=\"Format invalide\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption error=\"Format invalide\" />\n  </FormControl>\n);";
-export const WithSuccess = () => "export const WithSuccess = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" success=\"Email valide\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption success=\"Email valide\" />\n  </FormControl>\n);";
-export const Multiline = () => "export const Multiline = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Message\" />\n    </InputHeading>\n    <TextInput placeholder=\"Votre message...\" multiline numberOfLines={4} />\n  </FormControl>\n);";
-export const MultilineWithModal = () => "export const MultilineWithModal = () => {\n  const [text, setText] = useState('');\n  return (\n    <FormControl>\n      <InputHeading>\n        <FormControlLabel label=\"Description\" />\n      </InputHeading>\n      <TextInput\n        value={text}\n        onChangeText={setText}\n        placeholder=\"Taper pour ouvrir la modale de saisie...\"\n        multiline\n        openModal\n        modalSubmitLabel=\"Confirmer\"\n      />\n    </FormControl>\n  );\n};";
-export const Label = () => "export const Label = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlLabel label=\"Label par defaut\" />\n    <FormControlLabel label=\"Desactive\" disabled />\n    <FormControlLabel label=\"Erreur\" error=\"Message erreur\" />\n    <FormControlLabel label=\"Succes\" success=\"Message succes\" />\n    <FormControlLabel label=\"Avec badge\" labelRight={<Typography>Optionnel</Typography>} />\n  </Box>\n);";
+export const WithTextInput = () => "export const WithTextInput = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" />\n      <FormControlHint hint=\"Votre email professionnel\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n  </FormControl>\n);";
+export const WithError = () => "export const WithError = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption error=\"Format invalide\" />\n  </FormControl>\n);";
+export const WithSuccess = () => "export const WithSuccess = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption success=\"Email valide\" />\n  </FormControl>\n);";
+export const Label = () => "export const Label = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlLabel label=\"Label par defaut\" />\n    <FormControlLabel label=\"Desactive\" disabled />\n    <FormControlLabel label=\"Avec badge\" labelRight={<Typography>Optionnel</Typography>} />\n  </Box>\n);";
 export const Caption = () => "export const Caption = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlCaption error=\"Champ requis\" />\n    <FormControlCaption success=\"Valeur correcte\" />\n  </Box>\n);";
 export const Hint = () => "export const Hint = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlHint hint=\"Texte descriptif du champ\" />\n    <FormControlHint hint=\"Texte desactive\" disabled />\n  </Box>\n);";
 export const Modal = () => "export const Modal = () => {\n  const [open, setOpen] = useState(false);\n  return (\n    <Box>\n      <Button variant=\"secondary\" title=\"Ouvrir la modale\" onPress={() => setOpen(true)} />\n      <FormControlModal\n        open={open}\n        onClose={() => setOpen(false)}\n        submitLabel=\"Valider\"\n        onSubmit={() => setOpen(false)}\n      >\n        <TextInput placeholder=\"Saisir un texte...\" multiline numberOfLines={6} />\n      </FormControlModal>\n    </Box>\n  );\n};";
-export const NumberInput = () => "export const NumberInput = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Montant\" />\n        </InputHeading>\n        <FormControlNumberInput value={value} onChange={setValue} placeholder=\"0\" />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Avec unites\" />\n        </InputHeading>\n        <FormControlNumberInput\n          value={value}\n          onChange={setValue}\n          startAdornment={\n            <Box style={{ paddingLeft: 8, paddingRight: 4 }}>\n              <Typography>€</Typography>\n            </Box>\n          }\n          endAdornment={\n            <Box style={{ paddingLeft: 4, paddingRight: 8 }}>\n              <Typography>TTC</Typography>\n            </Box>\n          }\n        />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Desactive\" />\n        </InputHeading>\n        <FormControlNumberInput value={42} onChange={() => {}} disabled />\n      </FormControl>\n    </Box>\n  );\n};";
 export const DateInput = () => "export const DateInput = () => {\n  const [date, setDate] = useState('');\n  const [time, setTime] = useState('');\n  const [month, setMonth] = useState('');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Date\" />\n        </InputHeading>\n        <FormControlDateInput type=\"date\" value={date} onChange={setDate} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Heure\" />\n        </InputHeading>\n        <FormControlDateInput type=\"time\" value={time} onChange={setTime} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Mois\" />\n        </InputHeading>\n        <FormControlDateInput type=\"month\" value={month} onChange={setMonth} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const FileInput = () => "export const FileInput = () => {\n  const [file, setFile] = useState<FormControlFileInputValue>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Piece jointe\" />\n        </InputHeading>\n        <FormControlFileInput value={file} onChange={setFile} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Plusieurs fichiers\" />\n        </InputHeading>\n        <FormControlFileInput value={file} onChange={setFile} multiple />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Desactive\" disabled />\n        </InputHeading>\n        <FormControlFileInput value={null} onChange={() => {}} disabled />\n      </FormControl>\n    </Box>\n  );\n};";
-export const OtpInput = () => "export const OtpInput = () => {\n  const [code, setCode] = useState('');\n  return (\n    <FormControl>\n      <InputHeading>\n        <FormControlLabel label=\"Code de verification\" />\n      </InputHeading>\n      <FormControlOtpInput numberOfDigits={6} onTextChange={setCode} />\n      {code.length === 6 && <FormControlCaption success={`Code saisi : ${code}`} />}\n    </FormControl>\n  );\n};";
 export const storySources = {
     WithTextInput,
     WithError,
     WithSuccess,
-    Multiline,
-    MultilineWithModal,
     Label,
     Caption,
     Hint,
     Modal,
-    NumberInput,
     DateInput,
-    FileInput,
-    OtpInput,
 };