Description

LogInLock Kit is a collection of lightweight, reusable UI components for React applications. It is designed to be simple, modern, and highly customizable. It currently includes:

• Badge: A customizable badge component.
• Divider: A simple divider to separate sections.
• Spinner: A loading spinner with support for labels.

Installation

You can install loginlock-kit from npm:

npm install loginlock-kit

Or if you're using yarn:

yarn add loginlock-kit

Components

🔖 Badge

A component for displaying customizable badges with various style options.

Usage:

import { Badge } from 'loginlock-kit';

function App() {
  return (
    <div>
      <Badge variant="primary" size="md" label="New">
        10
      </Badge>
      <Badge variant="secondary" label="Beta" />
    </div>
  );
}

Props:

• variant (optional): Defines the badge style. Possible values: "primary", "secondary", "tertiary".
• size (optional): The size of the badge. Possible values: "sm", "md", "lg".
• label (optional): The label to display next to the badge.
• children (optional): The content of the badge, e.g., a number or text.

➗ Divider

A flexible divider component to separate content in your interface.

Usage:

import { Divider } from 'loginlock-kit';

function App() {
  return (
    <div>
      <p>Content above the divider</p>
      <Divider size="md" direction="horizontal" />
      <p>Content below the divider</p>
    </div>
  );
}

Props:

• size (optional): The size of the divider. Possible values: "sm", "md", "lg".
• direction (optional): The direction of the divider. Possible values: "horizontal", "vertical".
• className (optional): Additional class for custom styling.
• style (optional): Inline style for further customization.

⏳ Spinner

A loading spinner component with optional label support.

Usage:

import { Spinner } from 'loginlock-kit';

function App() {
  return (
    <div>
      <Spinner size="lg" label="Loading..." />
    </div>
  );
}

Props:

• size (optional): The size of the spinner. Possible values: "sm", "md", "lg".
• label (optional): The text displayed next to the spinner.
• className (optional): Additional class for custom styling.
• style (optional): Inline style for further customization.

Scripts

• npm run dev: Starts the development server using Vite.
• npm run build: Builds the package for production with TypeScript and Vite.
• npm run lint: Lints the code using ESLint.
• npm run preview: Previews the built version of the library.
• npm run sb: Starts Storybook for interactive component exploration and testing.
• npm run build-storybook: Builds the static version of Storybook.
• npm run test: Runs tests using Vitest.

Development

If you'd like to contribute or develop locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Chucky22Mendoza/LogInLock-kit.git
   cd LogInLock-kit

2. Install dependencies:

   npm install

3. Start the development environment:

   npm run dev

License

Distributed under the MIT License.

Contribute

If you have suggestions or improvements for this project, feel free to open an issue or submit a pull request on the GitHub repository!

Contact

• Author: Jesús Mendoza Verduzco
• Email: [email protected]
• GitHub: @Chucky22Mendoza

Explanation of the Translation:

• General Structure: The overall layout and structure of the README.md remain the same. I translated all the sections to maintain consistency in language while ensuring the tone is professional and user-friendly.
• Component Descriptions and Examples: The descriptions of the components (Badge, Divider, Spinner) and the usage examples are also translated, ensuring developers can follow along easily with the examples.
• Development Instructions: These are also translated, making it clear how developers can contribute to the project or run it locally.

This version should be clear and easy to follow for an English-speaking audience. Let me know if you need any more adjustments!