dubalu-address-form

Dubalu Address Form Library

Requisitos

• tailwindcss
• flowbite
• flowbite-react
• react-hook-form

Importate

Para usar, importa los estilos globales aplicación: import 'dubalu-address-form/dist/index.css';

Instalación

Instalar paquete:

  npm install dubalu-address-form

Ejecutar localmente

Clonar:

  git clone https://github.com/Dubalu-Development-Team/dubalu-address-form.git

Ir al proyecto:

  cd dubalu-address-form

Instalar dependencias:

  npm install

Iniciar el servidor:

  npm run dev

Correr tests:

  npm run test

Props

| Prop | Type | Descripción | | ------------------------ | ---------- | ------------------------------------------------------------------------------------------------------- | | hideName | boolean | Oculta el campo de nombre. | | customer | boolean | Cambia la etiqueta del campo de nombre (modo cliente). | | enabledExtAdress | boolean | Activa campos específicos para direcciones en Argentina y cambia etiquetas. | | withJurisdictionField | boolean | Muestra campo de documento o jurisdicción en direcciones de Argentina. | | postalCodeSearch | boolean | Habilita la búsqueda por código postal. | | hideCountry | boolean | Oculta el campo de país. | | hideContact | boolean | Oculta los campos de email y teléfono. | | initialValues | object | Valores iniciales para actualizar dirección. Requiere id para mostrar textos de actualización. | | onSubmit | function | Función que se ejecuta al enviar el formulario. | | getPostalCodeAddresses | function | Función para obtener direcciones desde un código postal. | | postalCodeAddresses | object | Objeto con resultados de búsqueda: { results: {}, matchesEstimated: 0, loading: boolean }. | | setPostalData | function | Función para establecer los datos del código postal. Retorna un objeto similar a postalCodeAddresses. | | defaultCountryCode | string | Country por defecto para el formulario de domicilios. | | lang | string | Idioma por defecto para los textos (en/es) |

Uso

import { useState } from 'react';
import { AddressForm, IPostalCodeState, AddressFields } from 'dubalu-address-form';

import 'dubalu-address-form/dist/index.css';

export default function App() {
  const [postalCodeAddresses, setPostalData] = useState<IPostalCodeState>({
    results: [],
    matchesEstimated: 0,
    loading: false,
  });

  const initialValues = {
    country_code: 'MX',
  };

  // Form

  const form = (
    <AddressForm
      initialValues={initialValues}
      postalCodeAddresses={postalData}
      setPostalData={setPostalData}
      onSubmit={(values) => {
        console.log('submit', values);
      }}
      getPostalCodeAddresses={() => Promise.resolve()}
    />
  );

  // OnlyFields (must be inside of form react-hook-form, use formContext)
  const fields = (
    <AddressFields
      postalCodeSearch
      postalCodeAddresses={postalCodeAddresses}
      getPostalCodeAddresses={getPostalCodeAddresses}
      setPostalData={setPostalData}
    />
  );

  return form;
}

Authors

• @dubalu

License

MIT