This project was bootstrapped with Create React App.
Storybook is on top of that and using Create React App webpack configuration.
In the project directory, you can run:
Runs the storybook.
Open http://localhost:9009 to view it in the browser.
The page will reload if you make edits.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the production version of storybook under storybook-static
folder.
Both SCSS and CSS modules are enabled.
In order to use CSS modules with storybook, you will need to add .module.scss
suffix to your SCSS file.
Example can be seen in Input.module.scss
Calling searchBooks
will trigger the API call to IT Bookstore API to search for books.
In order to be able to use the API you will need CORS extension in your browser.
Example:
// autocompleteValue is set by input
const [autocompleteValue, setAutocompleteValue] = useState('');
const [results, setResults] = useState([]);
useEffect(() => {
// In the effect we get the results and put them in state
async function fetchBooks() {
const books = await searchBooks(autocompleteValue);
setResults(books);
}
if (autocompleteValue.trim().length > 2) {
fetchBooks();
}
}, [autocompleteValue, setResults]);
Calling useDecoratedChangeHandler
with your onChange
handler as parameter will decorate your handler so it logs the value in the Storybook console.
Example can be seen in Input.stories.jsx