-
In the directory of your choosing run the following to pull down and install Storybook:
npx -p @storybook/cli sb init --type html
-
After install is done kick it off (should open in localhost:6006):
npm run storybook
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
// Just a fun experiment at testing palindromes by division | |
// test if a string is a palindrome by dividing length of string and looking at left and right | |
function isPalindromeByDivision(str) { | |
if (!str) { | |
return; | |
} | |
let result; | |
// clean up string - remove spaces and enforce casing |
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
var root = document.getElementById('root'), | |
domSearch = function (root, className) { | |
var stack = [root], | |
foundNodes = []; | |
while (stack.length > 0) { | |
var nodeToCheck = stack.pop(); | |
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
{ | |
"object": "value", | |
"document": { | |
"object": "document", | |
"data": {}, | |
"nodes": [ | |
{ | |
"object": "block", | |
"type": "heading-three", | |
"isVoid": false, |
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
{ | |
"document": { | |
"nodes": [ | |
{ | |
"object": "block", | |
"type": "paragraph", | |
"nodes": [ | |
{ | |
"object": "text", | |
"leaves": [ |
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
// Tests for API wrapper: https://gist.github.com/bessfernandez/4ead80f8f1b7e6f2db8c799bbc849794 | |
// Likely can be improved | |
/** | |
* @jest-environment node | |
*/ | |
import * as nock from 'nock'; | |
import request, { client } from './api'; | |
describe('API tests', () => { |
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
// A wrapper around axios with TS and async/await | |
// code below would be it's own .tsx file: | |
/* eslint-disable no-console */ | |
import axios from 'axios'; | |
const apiRoot = 'http://localhost:3000/'; | |
/** | |
* Create an Axios Client with baseURL as default |
Storybook is all about writing stories. A story usually contains a single state of one component, almost like a visual test case.
Typically you see Storybook used for React or other frameworks, but the library has recently introduced the option to use HTML for your Storybook projects. As a prototyping tool or playground this is great! No larger scale knowledge of other frameworks needed.