amcdnl

const { webpack } = require('@storybook/csf-plugin');

const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx'
});
module.exports = async () => {
  const { ReactDocgenTypeScriptPlugin } = await import('@storybook/react-docgen-typescript-plugin');

  return withNextra({

amcdnl

import React, { FC, useMemo, useRef } from 'react';
import { a, useSpring } from '@react-spring/three';
import { TextureLoader, LinearFilter, DoubleSide, Color, MathUtils } from 'three';
import { animationConfig } from '../utils';
import { useLoader } from '@react-three/fiber';
import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';

export interface IconProps {
  image: string;
  opacity?: number;

amcdnl

import { animate } from "framer-motion";
import React, { useEffect, useRef } from "react";

function Counter({ from, to }) {
  const ref = useRef();
from https://stackoverflow.com/questions/65013742/how-to-animate-number-with-framer-motion


  useEffect(() => {
    const controls = animate(from, to, {

amcdnl

General

• Snagit
• Metabase
• Notion

Dev

• Tower
• Dynabase

VSCode

amcdnl

import { useRef, useEffect, useCallback } from 'react';

export type noop = (...args: any[]) => any;

/**
 * Stable callback
 *
 * References:
 *  - https://github.com/facebook/react/issues/14099
 *  - https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

amcdnl

import panzoom, { PanZoom } from 'panzoom';
import { useEffect, useRef, useState } from 'react';

export interface PanZoomProps {
  maxZoom?: number;
  minZoom?: number;
}

export const usePanZoom = (props?: PanZoomProps) => {
  const elmRef = useRef<any | null>(null);

amcdnl

import NGraph from 'ngraph.graph';

const defaultOptions = {
  radius: 500,
};

function rotate(cx, cy, x, y, angle) {
  const radians = (Math.PI / 180) * angle;
  const cos = Math.cos(radians);
  const sin = Math.sin(radians);

amcdnl

import { cloneElement, useMemo } from 'react';
import classNames from 'classnames';

interface CloneElementProps {
  element: any | null;
  children?: any;
}

/**
 * CloneElement is a wrapper component for createElement function.

amcdnl

      - run:
          name: publish to npm
          command: |
            echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
            npm publish dist/js/*

amcdnl

/**
 * Space invaders canvas game
 * Inspiration: https://codepen.io/amcdaniel2/pen/MdQZpL
 */
export const spaceInvaders = canvas => {
  let screen;
  let gameSize;
  let game;

  let invaderCanvas;