Auth React Lib

Overview

This library provides reusable React components for building web interfaces, including authentication handling and responsive layout.

Installation

npm install @ncastellanos1/auth-core-react-lib

Basic Usage

import React from 'react';
import { Layout, AuthProvider, useAuth } from 'your-library-name';

function App() {
  const { user, isLoading } = useAuth();

  if (isLoading) return <p>Loading...</p>;

  return (
    <Layout>
      <h1>Welcome, {user?.name || 'Guest'}</h1>
    </Layout>
  );
}

export default function Root() {
  return (
    <AuthProvider authHost="https://your-auth-host.com">
      <App />
    </AuthProvider>
  );
}

Main Components

• Layout: Wraps your application and handles authentication.
• Sidebar: Collapsible sidebar for navigation.
• AuthProvider: Provides authentication context for the app.
• useAuth: Hook to access authentication state and actions.

Testing

This project uses Vitest as the testing framework, which is designed to integrate seamlessly with Vite. Unit tests are configured to ensure that all components react correctly to expected interactions and render properly.

Test Configuration

The tests are located in the src/components/__tests__/ directory. Each component has an associated test file that verifies its individual functionality.

How to Run Tests

1. Install Dependencies: Ensure all dependencies are installed by running the following command at the root of the project:

   npm install

2. Run Tests: You can execute all unit tests with the following command:

   npx vitest

   To run tests in watch mode, which automatically re-runs tests when files change, use:

   npx vitest --watch

3. Test Coverage: To generate a coverage report, run the tests with the --coverage option:

   npx vitest --coverage

   After execution, you can find the coverage report in the coverage/ directory. Open index.html in a browser to view a detailed representation of the code coverage.

Sure! Here is how you can update your README.md file to include instructions on updating dependencies using npm-check-updates:

Updating Dependencies

To keep our dependencies up-to-date with the latest versions, we use the npm-check-updates tool.

Instructions

1. Install npm-check-updates:

   If you haven't installed it yet, you can install it globally using the following command:

   npm install -g npm-check-updates

2. Update the package.json file:

   Run the following command to update the versions of the dependencies listed in the package.json file to the latest available versions:

   ncu -u

3. Install the updated dependencies:

   Once the package.json has been updated, run:

   npm install

   This will install the latest versions of the dependencies and update the package-lock.json file to reflect these changes.