This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.
The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.
npx create-react-app cra-ts --typescript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-- AppleScript -- | |
-- This example is meant as a simple starting point to show how to get the information in the simplest available way. | |
-- Keep in mind that when asking for a `return` after another, only the first one will be output. | |
-- This method is as good as its JXA counterpart. | |
-- Google Chrome | |
tell application "Google Chrome" to return title of active tab of front window | |
tell application "Google Chrome" to return URL of active tab of front window | |
-- Google Chrome Canary |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
</head> | |
<body> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const CDP = require('chrome-remote-interface'); | |
const chromeLauncher = require('lighthouse/chrome-launcher/chrome-launcher'); | |
function onPageLoad(Runtime) { | |
const js = "document.querySelector('title').textContent"; | |
return Runtime.evaluate({expression: js}).then(result => { | |
console.log('Title of page: ' + result.result.value); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link rel="preload" href="app.js"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link rel="prefetch" href="image.png"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link rel="preconnect" href="https://example.com"> |