@jeremiemeunier/form

v1.4.7

A complete library of reusable fields and forms (inputs, selectors, date pickers, submissions, etc.). It relies on `@jeremiemeunier/core` for styles and cross-cutting components.

Aperçu

Bibliothèque complète de champs et formulaires réutilisables (inputs, selecteurs, date pickers, soumissions…). Elle s’appuie sur @jeremiemeunier/core pour les styles et composants transverses.

Installation

1. Ajoutez un fichier .npmrc à la racine de votre projet :

   @jeremiemeunier:registry=https://npm.pkg.github.com

2. Installez les packages requis :

   npm install @jeremiemeunier/core @jeremiemeunier/form

3. Importez les composants nécessaires dans votre application :

   import { Input, Select, Submit } from "@jeremiemeunier/form";

Scripts npm

Développement local

npm install
npm run lint
npm run build
# npm run pub      # publication stable (connexion à GitHub Packages requise)
# npm run pubbeta  # publication d'une préversion

Tests

Ce package ne fournit pas encore de suite de tests automatisés.

Utilisation rapide

Le package est déjà compilé et publié, aucune étape de build supplémentaire n'est requise pour la consommation depuis un projet React. Après l’installation, importez simplement le composant souhaité :

import { Form, Input, Submit } from "@jeremiemeunier/form";

Composants disponibles

• <Adresse>
• <AutoComplete>
• <Checkbox>
• <CheckboxSlider>
• <DatePicker>
• <DragAndDrop>
• <FileInput>
• <Form>
• <Group>
• <Input>
• <Message>
• <Password>
• <Progress>
• <Radio>
• <Select>
• <Submit>
• <TagInput>
• <TextArea>
• <TotpInput>

Props settings

All inputs components

Select

const [content, setContent] = useState("");
const [error, setError] = useState("");

...

<Select
  label={"My select label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  locked={true|false}>
  <option>my select option</option>
  <option>my select option</option>
  <option>my select option</option>
  <option>my select option</option>
  <option>my select option</option>
</Select>

Input

const [content, setContent] = useState("");
const [error, setError] = useState("");

...

<Input
  label={"My input label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  type={"url"|"text"|"mail"|...}
  maxLength={integer}
  placeHolder={"My input placeholder"}
  locked={true|false}
  regex={regexPattern}
  regexLabel={"My error text for regex"}
  required={true|false}
  name={optional: "my_input_name"} />

For type props see <input> : The Input (Form Input) element

FileInput

Vous devez utiliser un FormData et ajouter enctype="multipart/form-data" lors de l'utilisation de ce composant.

const [content, setContent] = useState("");
const [error, setError] = useState("");

...

<FileInput
  label={"My file input label"}
  setContent={setContent}
  error={error}
  size={integer}
  required={true|false}
  accept={["jpg", "xlsx", ...]} />

Password

const [content, setContent] = useState("");
const [error, setError] = useState("");

...

<Password
  label={"My password input label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  maxLength={integer}
  placeHolder={"My input placeholder"}
  locked={true|false}
  regex={regexPattern}
  regexLabel={"My error text for regex"}
  required={true|false}
  name={optional: "my_input_name"}
  isNew={true|false} />

TextArea

const [content, setContent] = useState("");
const [error, setError] = useState("");

...

<TextArea
  label={"My textarea label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  maxLength={integer}
  placeHolder={"My textarea placeholder"}
  locked={true|false}
  regex={regexPattern}
  regexLabel={"My error text for regex"}
  required={true|false}
  name={optional: "my_input_name"}
  rows={optional: integer} />

Message

<Message
  label={"My message label"}
  content={"Message content"}
  size={integer}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  type={"info"|"danger"|"warning"} />

Checkbox

const [content, setContent] = useState(true|false);
const [error, setError] = useState("");

...

<Checkbox
  label={"My checkbox label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  required={true|false}
  name={optional: "my_checkbox_name"} />

CheckboxSlider

const [content, setContent] = useState(true|false);
const [error, setError] = useState("");

...

<CheckboxSlider
  label={"My checkbox slider label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  required={true|false}
  name={optional: "my_checkbox_slider_name"} />

Radio

const [content, setContent] = useState("");
const [error, setError] = useState("");

...

<Radio
  label={"My radio label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  values={{
    valueKey: "Value"
  }}
  required={true|false}
  name={optional: "my_radio_name"} />

Group

const [content, setContent] = useState({
  selectKey: "selectValue",
  inputKey: "inputValue"
});
const [error, setError] = useState({
  selectKey: "",
  inputKey: ""
});

...

<Group
  label={"My group label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  locked={true|false}
  required={true|false}
  name={optional: "my_group_name"}>
  <Select
    label={"My select label"}
    content={content.selectKey}
    setContent={(value) => setContent({
      ...content,
      selectKey: value
    })}
    error={error.selectKey}
    size={integer}
    readOnly={true|false}
    tagline={{
      "link": "https://digitalteacompany.fr",
      "label": "DigitalTeacompany"
    }}
    locked={true|false}
    required={true|false}
    name={optional: "my_select_name"}>
    <option>my select option</option>
    <option>my select option</option>
    <option>my select option</option>
    <option>my select option</option>
    <option>my select option</option>
  </Select>
  <Input
    label={"My input label"}
    content={content.inputKey}
    setContent={(value) => setContent({
      ...content,
      inputKey: value
    })}
    error={error.inputKey}
    size={integer}
    readOnly={true|false}
    tagline={{
      "link": "https://digitalteacompany.fr",
      "label": "DigitalTeacompany"
    }}
    locked={true|false}
    required={true|false}
    name={optional: "my_input_name"} />
</Group>

Form

const [content, setContent] = useState({
  inputKey: "",
  selectKey: ""
});
const [error, setError] = useState({
  inputKey: "",
  selectKey: ""
});

...

const mySubmitHandler = (event) => {
  event.preventDefault();

  ...
};

const myErrorHandler = (event) => {
  event.preventDefault();

  ...
};

<Form
  content={content}
  setContent={setContent}
  error={error}
  setError={setError}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  submit={{
    "label": "My submit button label",
    "action": mySubmitHandler,
    "appearance": "primary"
  }}
  otherAction={{
    "label": "My other button label",
    "action": myErrorHandler,
    "appearance": "secondary"
  }}
  locked={true|false}
  name={optional: "my_form_name"}>
  <Input ... />
  <Select ... />
  <Checkbox ... />
  <CheckboxSlider ... />
  <Radio ... />
</Form>

Progress

const [content, setContent] = useState(0);
const [error, setError] = useState("");

...

<Progress
  label={"My progress label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  required={true|false}
  name={optional: "my_progress_name"} />

Submit

const mySubmitHandler = (event) => {
  event.preventDefault();

  ...
};

<Submit
  label={"My submit button label"}
  action={mySubmitHandler}
  appearance={"primary"}
  locked={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }} />

DragAndDrop

const [content, setContent] = useState("");
const [error, setError] = useState("");

...

<DragAndDrop
  label={"My drag and drop label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  locked={true|false}
  required={true|false}
  name={optional: "my_drag_and_drop_name"} />

TagInput

const [content, setContent] = useState(["Tag 1", "Tag 2"]);
const [error, setError] = useState("");

...

<TagInput
  label={"My tag input label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  locked={true|false}
  required={true|false}
  name={optional: "my_tag_input_name"} />

TotpInput

const [content, setContent] = useState("");
const [error, setError] = useState("");

...

<TotpInput
  label={"My TOTP input label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  locked={true|false}
  required={true|false}
  name={optional: "my_totp_input_name"} />

DatePicker

const [content, setContent] = useState(new Date());
const [error, setError] = useState("");

...

<DatePicker
  label={"My date picker label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  locked={true|false}
  required={true|false}
  name={optional: "my_date_picker_name"}
  blockedDate={{
    type: "array",
    values: ["2023-01-01", "2023-01-02"]
  }} />

AutoComplete

const [content, setContent] = useState("");
const [error, setError] = useState("");

const data = [
  {
    value: "FR",
    label: "France"
  },
  {
    value: "DE",
    label: "Allemagne"
  }
];

...

<AutoComplete
  label={"My autocomplete label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  locked={true|false}
  required={true|false}
  name={optional: "my_autocomplete_name"}
  data={data} />

Adresse

const [content, setContent] = useState({
  address: "",
  city: "",
  zip: ""
});
const [error, setError] = useState({
  address: "",
  city: "",
  zip: ""
});

...

<Adresse
  label={"My address label"}
  content={content}
  setContent={setContent}
  error={error}
  size={integer}
  readOnly={true|false}
  tagline={{
    "link": "https://digitalteacompany.fr",
    "label": "DigitalTeacompany"
  }}
  locked={true|false}
  required={true|false}
  name={optional: "my_address_name"} />

FileInput drop zone

const [content, setContent] = useState("");
const [error, setError] = useState("");

...

<FileInput
  label={"My file input label"}
  setContent={setContent}
  error={error}
  size={integer}
  required={true|false}
  accept={["jpg", "xlsx", ...]}
  dropZone={true|false} />