Searcher Library

Descripción

Una librería de componentes para Next.js diseñada para integrarse fácilmente en proyectos con la estructura src/app.

Instalación

Para instalar el componente, usa el siguiente comando:

pnpm dlx searcher-library add searcher

Uso

Una vez que el componente esté instalado y configurado, puedes utilizarlo en tu proyecto Next.js. Aquí hay un ejemplo básico de cómo usar el componente Searcher:

Configurar postcss

En el archivo postcss.config.mjs configurar de la siguiente manera

const config = {
   plugins: {
      "tailwindcss/nesting": {},
      tailwindcss: {},
      autoprefixer: {},
   },
};

Configurar tailwind

En el archivo tailwind.config.ts configurar los colores primary y secondary que son los colores base que usa el componente y la fuente poppins.

content: [
   ...,
   "./src/searcher/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
   extend: {
      colors: {
         primary: {
            DEFAULT: "#0061a9",
         },
         secondary: {
            DEFAULT: "#f29d19",
         },
      },
      fontFamily: {
         poppins: ["var(--font-poppins)"],
      },
   },
},

Importar el componente

import { Searcher } from '../src/searcher/components/Searcher';

Uso en un componente

El componente recibe los siguientes props para su correcto funcionamiento:

interface Props {
   urlGlobal: string;
   labelDeparture: string;
   labelArrival: string;
   labelStartDate: string;
   labelEndDate: string;
   textSearchDeparture: string;
   textSearchArrival: string;
   textSearchStartDate: string;
   textSearchEndDate: string;
   textSelectedDeparture: string;
   textSelectedArrival: string;
   textSelectedStartDate: string;
   textSelectedEndDate: string;
   noResultsMessage: string;
   langCurrent?: string;
   textSearch: string;
}

Ejemplo basico del componente:

const MyComponent = () => (
  <div>
    <Searcher
        // URL
        urlGlobal="https://websales.futuranet.com"
        // TEXTS DEPARTURE
        labelDeparture="Origen"
        textSearchDeparture="Buscar origen..."
        textSelectedDeparture="Seleccione un origen"
        // TEXTS ARRIVAL
        labelArrival="Destino"
        textSearchArrival="Buscar destino..."
        textSelectedArrival="Seleccione un destino"
        // TEXTS START DATE
        labelStartDate="Fecha de ida"
        textSearchStartDate="Buscar fecha..."
        textSelectedStartDate="Seleccione una fecha"
        // TEXTS END DATE
        labelEndDate="Fecha de regreso"
        textSearchEndDate="Buscar fecha..."
        textSelectedEndDate="Seleccione una fecha"
        // TEXTS NO RESULTS
        noResultsMessage="No se encontraron resultados"
        // LANGUAGE
        langCurrent="es"
        // TEXTS SEARCH
        textSearch="Buscar"
      />
  </div>
);

export default MyComponent;

Dependencias

Esta librería requiere las siguientes dependencias, que se instalarán automáticamente:

@hookform/resolvers @radix-ui/react-dialog @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-slot class-variance-authority clsx cmdk date-fns lucide-react react-hook-form tailwind-merge tailwindcss-animate zod zustand