Header Made with leviarista tool
Table of contents
- Setup for testing
- Setup for Storybook with TailwindCSS and TypeScript
- Currying and composition
- Custom hooks with test
Required packages
npm create vite@latest
# React -> TypeScript + SWC
npm i vitest happy-dom @testing-library/react @testing-library/user-event -D
# (optional) Added vitest ui for a web interface of each test env.
npm i -D @vitest/uiFiles modified:
It depends on documentation.
//package.json -> script test added.
"test": "vitest"// vite.config.ts Add this line to the beginning of the file
/// <reference types="vitest" />
// then, after plugins, add a comma.
test: {
environment: 'happy-dom',
},- Packages for this step:
- class-variance-authority
- tailwind-merge
- Install and setup TailwindCSS following docs
- Install StoryBook following the docs
- Import tailwindcss.css file into preview.ts
// .storybook/preview.ts
...
import 'tailwindcss/tailwind.css';Now all tailwind classes will be available inside stories.
Added an example inside util folder with test of and advance use of curried functions with function composition using de example of Yuri Bett, i just convert to TypeScript and add some test for better understanding.
currying example | currying test
Descriptions/examples provided by Leschev, i just add generic support and testing
The advantages of using this custom hook are twofold: it simplifies the management of array states and provides a cleaner and more readable code structure.
The useAsync hook takes in a callback function that performs the asynchronous operation and an optional array of dependencies. It returns an object with three properties: loading, error, and value.
Thats all by the moment of this learning path.
Tips/Tricks
- html-aria list: https://www.w3.org/TR/html-aria/#docconformance