🌎 Vite.js Template 🌎

📌 Requirements: 📌

NodeJs: 🔗 https://nodejs.org/en/

---

▶️ Get Started:

1. Clone this repo

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

2. Install NPM packages

npm install or yarn install

3. Run this project

npm run dev or yarn dev

---

Template configuration:

• Jest + Testing Library for automated testing. 🔗 https://jestjs.io/ + https://testing-library.com/
• Storybook for component documentation. 🔗 https://storybook.js.org/
• Eslint + Prettier for code standardization and formatting. 🔗 https://eslint.org/ + https://prettier.io/
• Typescript for typing. 🔗 https://www.typescriptlang.org/
• Tailwind Css for styling components. 🔗 https://tailwindcss.com/
• HuskyJs for automatically lint your commit messages, code, and run tests upon committing or pushing. 🔗 https://typicode.github.io/husky/

---

Tests + Storybook:

• How to run tests:

npm run test or npm run test:watch

It has an example of tests with Jest + Testing-Library in src/App.spec.tsx

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');
	});
});

---

• How to run storybook:

npm run storybook or yarn storybook

also has an example of using Storybook in the Text component in src/components/Text/text.stories.tsx

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'
	}
};