🌎 Vite.js Template 🌎

This repository provides a robust and opinionated React template powered by Vite.js, designed to kickstart your web development projects with a focus on modern tooling, testing, and code quality. It comes pre-configured with essential development tools to ensure a smooth and efficient workflow.

📑 Table of Contents

• 📌 Requirements
• ▶️ Get Started
• ⚙️ Features & Technologies
• 🛠️ Development & Usage
  • Running Tests
  • Storybook Documentation
• 🤝 Contributing
• 📄 License

---

📌 Requirements

To get started with this template, you need to have Node.js installed on your system.

• Node.js: https://nodejs.org/en/

---

▶️ Get Started

Follow these steps to set up and run the project locally:

1. Clone this repository:

   git clone https://github.com/Aleydon/React-Vite.git

2. Navigate into the project directory:

   cd React-Vite

3. Install NPM packages:

   npm install # or yarn install

4. Run the development server:

   npm run dev # or yarn dev

   This will start the development server, and you can view the application in your browser, typically at http://localhost:5173.

---

⚙️ Features & Technologies

This template is configured with a comprehensive set of tools to enhance your development experience:

• Jest + Testing Library: For robust automated testing of your React components.
  • 🔗 Jest
  • 🔗 Testing Library
• Storybook: For isolated component development and documentation, making it easy to showcase and test UI components.
  • 🔗 Storybook
• ESLint + Prettier: To maintain consistent code style and catch potential errors early.
  • 🔗 ESLint
  • 🔗 Prettier
• TypeScript: For static typing, improving code quality, readability, and maintainability.
  • 🔗 TypeScript
• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
  • 🔗 Tailwind CSS
• Husky: For Git hooks, automating tasks like linting commit messages, formatting code, and running tests before commits or pushes.
  • 🔗 Husky

---

🛠️ Development & Usage

Running Tests

To execute the automated tests configured with Jest and Testing Library:

npm run test # or npm run test:watch

An example test file (src/App.spec.tsx) is included to demonstrate basic testing practices:

import { render, screen } from '@testing-library/react';

import App from './App';

describe('App Component', () => {
	it('should get the text hello world', () => {
		render(<App />);
		const hello = screen.getByText('Hello World');
		expect(hello).toBeDefined();
	});

	it('should get the text hello world in the component s heading', () => {
		render(<App />);
		const heading = screen.getByRole('heading', {
			name: 'Hello World'
		});
		expect(heading).toBeInTheDocument();
	});

	it('must get the link from the App component', () => {
		render(<App />);
		const link = screen.getByRole('link', { name: 'github.com/Aleydon' });
		expect(link).toBeDefined();
		expect(link).toHaveAttribute('target', '_blank');
		expect(link).toHaveAttribute('aria-label', 'github.com/Aleydon');
	});
});

Storybook Documentation

To run Storybook and explore the component documentation:

npm run storybook # or yarn storybook

An example Storybook story (src/components/Text/text.stories.tsx) is provided to illustrate how to document your components:

import type { Meta, StoryObj } from '@storybook/react';

import Text, { type TextProps } from '.';

const text: Meta<typeof Text> = {
	component: Text,
	title: 'Components/Text'
};

export default text;

export const Small: StoryObj<TextProps> = {
	args: {
		size: 'small',
		children: 'Small Text'
	}
};

export const Medium: StoryObj<TextProps> = {
	args: {
		size: 'medium',
		children: 'Medium Text'
	}
};
export const Large: StoryObj<TextProps> = {
	args: {
		size: 'large',
		children: 'Large Text'
	}
};

---

🤝 Contributing

Contributions are welcome! If you have suggestions for improvements or new features, please feel free to open an issue or submit a pull request.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.