https://github.com/aleydon/react-vite
React ViteJs template configured with typescript, eslint, prettier, husky (pre-commit), storybook, jest, testing-library and more...
https://github.com/aleydon/react-vite
eslint eslint-config eslint-config-prettier eslint-plugin-prettier javascript js prettier react react-hooks react-router react-router-dom reactjs storybook ts tsx typescript vite vitejs
Last synced: 17 days ago
JSON representation
React ViteJs template configured with typescript, eslint, prettier, husky (pre-commit), storybook, jest, testing-library and more...
- Host: GitHub
- URL: https://github.com/aleydon/react-vite
- Owner: Aleydon
- Created: 2024-11-23T04:28:16.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-01-29T05:33:00.000Z (23 days ago)
- Last Synced: 2025-01-29T06:26:54.419Z (23 days ago)
- Topics: eslint, eslint-config, eslint-config-prettier, eslint-plugin-prettier, javascript, js, prettier, react, react-hooks, react-router, react-router-dom, reactjs, storybook, ts, tsx, typescript, vite, vitejs
- Language: TypeScript
- Homepage:
- Size: 948 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
:earth_americas: Vite.js Template :earth_americas:
## :pushpin: Requirements: :pushpin:
NodeJs: :link: https://nodejs.org/en/
---
#### :arrow_forward: Get Started:
1. Clone this repo
```sh
git clone https://github.com/Aleydon/React-Vite.git
```
2. Install NPM packages
```sh
npm install or yarn install
```
3. Run this project
```sh
npm run dev or yarn dev
```
---
Template configuration:
- Jest + Testing Library for automated testing. :link: https://jestjs.io/ + https://testing-library.com/
- Storybook for component documentation. :link: https://storybook.js.org/
- Eslint + Prettier for code standardization and formatting. :link: https://eslint.org/ + https://prettier.io/
- Typescript for typing. :link: https://www.typescriptlang.org/
- Tailwind Css for styling components. :link: https://tailwindcss.com/
- HuskyJs for automatically lint your commit messages, code, and run tests upon committing or pushing. :link: https://typicode.github.io/husky/
---
Tests + Storybook:
- How to run tests:
```sh
npm run test or npm run test:watch
```
It has an example of tests with Jest + Testing-Library in _src/App.spec.tsx_
```ts
import { render, screen } from '@testing-library/react';
import App from './App';
describe('App Component', () => {
it('should get the text hello world', () => {
render();
const hello = screen.getByText('Hello World');
expect(hello).toBeDefined();
});
it('should get the text hello world in the component s heading', () => {
render();
const heading = screen.getByRole('heading', {
name: 'Hello World'
});
expect(heading).toBeInTheDocument();
});
it('must get the link from the App component', () => {
render();
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:
```sh
npm run storybook or yarn storybook
```
also has an example of using Storybook in the Text component in _src/components/Text/text.stories.tsx_
```ts
import type { Meta, StoryObj } from '@storybook/react';
import Text, { type TextProps } from '.';
const text: Meta = {
component: Text,
title: 'Components/Text'
};
export default text;
export const Small: StoryObj = {
args: {
size: 'small',
children: 'Small Text'
}
};
export const Medium: StoryObj = {
args: {
size: 'medium',
children: 'Medium Text'
}
};
export const Large: StoryObj = {
args: {
size: 'large',
children: 'Large Text'
}
};
```