dubalu-new-franchise

Dubalu New Franchise Form Library

Requisitos

• tailwindcss
• flowbite
• flowbite-react

Para usar, importa los estilos globales aplicación: import '@dubaluofficial/dubalu-new-franchise/dist/index.css';

Instalación

Instalar paquete:

  npm install @dubaluofficial/dubalu-new-franchise

Ejecutar localmente

Clonar:

  git clone https://github.com/Dubalu-Development-Team/dubalu-new-franchise.git

Ir al proyecto:

  cd dubalu-new-franchise

Instalar dependencias:

  npm install

Iniciar el servidor:

  npm run dev

Correr tests:

  npm run test

Props

| Prop | Tipo | Descripción | | ------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------- | | initialValues | object | Valores iniciales del formulario. Debe incluir country_code para inicializar correctamente dubalu-address-form. | | onSubmit | function | Función que se ejecuta al enviar el formulario. | | getPostalCodeAddresses | function | Función que retorna las direcciones correspondientes a un código postal. | | postalCodeAddresses | object | Objeto con resultados de búsqueda: { results: {}, matchesEstimated: 0, loading: boolean }. | | setPostalData | function | Función que actualiza los datos del código postal. Debe retornar un objeto similar a postalCodeAddresses. | | verifyAccountExist | function | Función para validar si una cuenta (email) ya existe. | | verifySlugExist | function | Función para verificar si un slug (dominio) ya está en uso. | | defaultCountryCode | string | Country por defecto para el formulario de domicilios. | | lang | string | Idioma por defecto para los textos (en/es) | | domain | string | Dominio del sitio |

Uso

import { useState } from "react";
import {
  FranchiseForm,
  IPostalCodeState,
} from "@dubaluofficial/dubalu-new-franchise";

import "@dubaluofficial/dubalu-new-franchise/dist/index.css";

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

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

  return (
    <FranchiseForm
      initialValues={initialValues}
      postalCodeAddresses={postalCodeAddresses}
      setPostalData={setPostalData}
      onSubmit={(values) => console.log("values", values)}
      getPostalCodeAddresses={() => Promise.resolve()}
      verifyAccountExist={() => Promise.resolve(false)}
      verifySlugExist={() => Promise.resolve(false)}
    />
  );
}

Authors

• @dubalu

License

MIT