@joelbarron/react-web-dev-kit

Libreria reusable para apps web React con piezas listas para autenticacion, formularios, grillas, config por ambiente y utilidades comunes.

Que incluye

| Modulo | Que aporta | Docs | | --- | --- | --- | | auth | Cliente para jb-drf-auth, provider, hooks y rutas de auth | docs/auth.md | | config | Config global por stage y helpers de URL/API | docs/config.md | | forms | Campos base sobre React Hook Form + MUI | docs/forms.md | | grid | JBGrid, header y providers para tablas | docs/grid.md | | query | QueryClient preconfigurado para React Query | docs/query.md | | hooks | Hooks compartidos para casos de app | docs/hooks.md | | utils | Helpers generales reutilizables | docs/utils.md |

Instalacion

npm i @joelbarron/react-web-dev-kit

Peer deps principales (segun package.json):

• react >= 19
• react-dom >= 19
• @tanstack/react-query >= 5
• react-hook-form >= 7
• @mui/material >= 5

Inicio rapido

Auth client

import { createAuthClient } from '@joelbarron/react-web-dev-kit/auth';

export const authClient = createAuthClient({
  apiBaseUrl: import.meta.env.VITE_API_URL,
  onUnauthorized: () => {
    window.location.href = '/sign-in';
  }
});

Auth Provider

import { JBAuthProvider } from '@joelbarron/react-web-dev-kit/auth';
import { authClient } from './authClient';

export function Root() {
  return (
    <JBAuthProvider authClient={authClient}>
      <App />
    </JBAuthProvider>
  );
}

Query client

import { createReactWebQueryClient } from '@joelbarron/react-web-dev-kit/query';

export const queryClient = createReactWebQueryClient({
  onUnauthorized: () => {
    window.location.href = '/sign-in';
  }
});

Config por ambiente

import { createJBWebConfigFromEnv, getApiBaseUrl } from '@joelbarron/react-web-dev-kit/config';

const appConfig = createJBWebConfigFromEnv(
  {
    stage: 'qa',
    api: {
      version: 'v1',
      host: {
        production: 'https://api.example.com',
        qa: 'https://api-qa.example.com',
        development: 'http://127.0.0.1:8000',
        local: 'http://localhost:8000'
      }
    }
  },
  import.meta.env as Record<string, string | undefined>
);

export const apiBaseUrl = getApiBaseUrl(appConfig);

Forms y Grid

import { JBTextField, JBSelectField, JBDatePickerField, JBGrid, JBGridHeader } from '@joelbarron/react-web-dev-kit';

Tambien incluye formularios listos de auth:

• AuthPasswordSignInForm
• AuthForgotPasswordForm
• AuthResetPasswordForm

Versionado y release

Canales publicados en npm:

• latest: versiones estables desde main
• next: prereleases (-rc.x) desde next

Consulta rapida de version y dist-tags:

npm view @joelbarron/react-web-dev-kit version dist-tags --json

Guia completa de release automation:

• docs/release.md

Documentacion

• Indice docs
• Auth
• Config
• Forms
• Grid
• Query
• Hooks
• Utils
• Release

Changelog

• CHANGELOG.md