donaldpipowitch

const puppeteer = require('puppeteer');
const chalk = require('chalk');

const { green, red, cyan, grey, bold } = chalk;

// we assume storybook can visited at http://localhost:9001
const url = 'http://localhost:9001/iframe.html';

const runAxe = () =>
  new Promise((resolve, reject) =>

donaldpipowitch

This is a very basic example which shows how you can create a simple ESLint rule with @ts-check support. This example features the rule and a test. The rule checks, if you pass an absolute URL to a history.push function or not.

If you want to use this rule in your ESLint configuration without publishing the rule there is a caveat. AFAIK you can't simply include the path to your rule in your .eslintrc.js (correct me if I'm wrong). You need to pass the directory of this rule to the CLI as --rulesdir "./path/to/rules" and if you use VS Code with the ESLint extension you need to set "eslint.options": { "rulePaths": ["./path/to/rules"] }, in your settings.json as well. Only then you can add the rule to your config:

module.exports = {
  // ...yourCurrentConfig,
  rules: {
    // ...yourCurrentConfig.rules,
 'some-rule': 'error'

donaldpipowitch

function useScrollBottom<T extends HTMLElement>(offset?: number) {
  const [atBottom, setAtBottom] = useState(false);
  const scrollEl = useRef<T>(null);

  useEffect(() => {
    const { current } = scrollEl;
    if (current) {
      // by default we take the clientHeight into account, so "bottom" begins as soon as the last
      // visible piece appears in the scrollable area
      const withOffset = offset === undefined ? current.clientHeight : offset;

donaldpipowitch

import { useEffect, useRef } from 'react';

function usePrevious<T>(value: T) {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

donaldpipowitch

import React, { createContext, useState, useContext, FC } from 'react';

type ContextValue = [boolean, (value: boolean) => void] | undefined;
const FullwidthContext = createContext<ContextValue>(undefined);

const defaultState = false;

export const FullwidthProvider: FC = ({ children }) => {
  const state = useState(defaultState);
  return (

donaldpipowitch

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpErrorResponse,
  HttpClient
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';

donaldpipowitch

this.http.get<Data1>(url1).pipe(
  mergeMap((data1) =>
    this.http.get<Data2>(url2).pipe(map((_data2) => data1))
  )
);

donaldpipowitch

import {
  Directive,
  Input,
  Output,
  EventEmitter,
  ElementRef,
  OnDestroy
} from '@angular/core';

@Directive({

donaldpipowitch

div [my-focusout-outside]="shouldTrack" (focusoutOutside)="doSomething()">Hello</div>

donaldpipowitch

React

index.tsx:

import React from 'react';
import styled from 'styled-components';
 
enum Area {
  header = 'header',