Skip to content

Instantly share code, notes, and snippets.

View ghengeveld's full-sized avatar

Gert Hengeveld ghengeveld

234 followers · 44 following
View GitHub Profile
@ghengeveld
ghengeveld / storybook-embed.html
Last active July 7, 2021 09:41
Storybook embed example
<!DOCTYPE html>
<html>
<head>
<title>Storybook embed example</title>
<script>
window.addEventListener("message", (message) => {
try {
const data = JSON.parse(message.data)
if (!data || data.context !== "iframe.resize") return
const url = new URL(data.src)
@ghengeveld
ghengeveld / storybook-embed.js
Created July 7, 2021 09:28
Storybook embed util
window.addEventListener("message", (message) => {
try {
const data = JSON.parse(message.data)
if (!data || data.context !== "iframe.resize") return
const url = new URL(data.src)
for (const key of [...url.searchParams.keys()]) {
if (!["path", "id", "args"].includes(key)) url.searchParams.delete(key)
}
for (const el of document.querySelectorAll(`iframe[src^="${url.href}"]`)) {
el.style.height = `${data.height}px`
@ghengeveld
ghengeveld / example.stories.jsx
Created December 14, 2020 20:46
Storybook lazy loading
export default {
title: 'Basics/Button',
loaders: [() => import('./Button')],
};
const Template = (args, { loaded }) => {
const { default: Button } = loaded;
return <Button {...args} />;
};
@ghengeveld
ghengeveld / shallowEqual.js
Created November 13, 2020 15:13
shallowEqual with logging
function shallowEqual(objA, objB): boolean {
if (Object.is(objA, objB)) {
return true;
}
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
console.log('not object');
return false;
}
@ghengeveld
ghengeveld / storage.js
Created April 2, 2020 08:41
Safe localStorage & sessionStorage with JSON support
const storage = type => ({
/**
* Asserts that sessionStorage or localStorage is available.
*
* Returns true even on quota exceeded error, so we won't silently ignore when we're using too much
* space, unless we haven't stored anything yet which will happen when the browser has set a very
* strict size limit (i.e. Safari Private Browsing sets quota to 0).
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
*/
@ghengeveld
ghengeveld / asyncMocks.ts
Last active November 4, 2019 08:34
TypeScript functions to create mock state objects for React Async
export const mockWaiting = (): AsyncInitial<any> => ({
data: undefined,
error: undefined,
initialValue: undefined,
startedAt: undefined,
finishedAt: undefined,
status: "initial",
isInitial: true,
isPending: false,
isLoading: false,
@ghengeveld
ghengeveld / api.md
Created September 25, 2019 17:21
Nact API 
start(systemName | extension, ...extensions)
stop(actorRef) 
query(actor,msg, timeoutInMs)
dispatch(actor, msg, sender)
spawn(parent, f, name,  properties)
spawnStateless(parent, f, name, properties)
spawnPersistent(parent, f, persistentKey, name, properties)
persistentQuery(parent, f, key, properties) : Promise<Result>
@ghengeveld
ghengeveld / README.md
Created September 16, 2019 21:25
Chromatic thank you note

Thanks

Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us catch unexpected changes on time.

@ghengeveld
ghengeveld / hello.spec.jsx
Created August 28, 2019 20:55
Promise test with Jest
import React from "react"
import { render, unmountComponentAtNode } from "react-dom"
import { act } from "react-dom/test-utils"
let container = null
beforeEach(() => {
// setup a DOM element as a render target
container = document.createElement("div")
document.body.appendChild(container)
@ghengeveld
ghengeveld / Loading.js
Last active February 11, 2019 12:30
Styled loading bar animation
import styled, { keyframes } from "styled-components"
const slide = keyframes`
0% { left: -35%; right: 100%; }
60% { left: 100%; right: -90%; }
100% { left: 100%; right: -90%; }
`
const chase = keyframes`
0% { left: -200%; right: 100%; }