souporserious

import { useRouter } from 'next/router'
import * as queryString from 'query-string'

/** Converts NextJS router params into an object that is run on both the server and client. */
export function useRouterParams<Params>() {
  const router = useRouter()
  const query = queryString.parse(router.asPath.split('?')[1])

  return Object.fromEntries(
    Object.entries(query).map(([key, value]) => [key, parseValue(value)])

souporserious

/** step:01 Start with the initial plugin. */
import jsx from '@babel/plugin-syntax-jsx'

export default () => {
  return {
    inherits: jsx,
    visitor: {
      /** step:02 Add visitor */
      Program() {
        this.tree = []

souporserious

type Step = number | string

/**
 * Create a fluid type scale that can be interpolated between a minimum and maximum screen width.
 *
 * Forked from: https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
 */
export function createTypeScale<Steps extends ReadonlyArray<Step>>({
  baseFontSize,
  ratio,

souporserious

import glob from 'fast-glob'
import { build } from 'esbuild'
import { Project } from 'ts-morph'

const project = new Project({
  compilerOptions: {
    outDir: 'dist',
    emitDeclarationOnly: true,
  },
  tsConfigFilePath: './tsconfig.json',

souporserious

import { promises as fs } from 'fs';
import { basename, extname } from 'path';

type Dirent = {
  isFile(): boolean;
  isDirectory(): boolean;
  isBlockDevice(): boolean;
  isCharacterDevice(): boolean;
  isSymbolicLink(): boolean;
  isFIFO(): boolean;

souporserious

import { Text } from 'components'

export default function Example() {
  return (
    <Text scale={{ initial: 1, hover: 1.2 }}>
      Hello <Text>World</Text>
    </Text>
  )
}

souporserious

/// <reference types="styled-components/cssprop" />
import * as React from 'react'
import { CSSProp } from 'styled-components';

const gridBreakpoints = {
  small: '@media (min-width: 0px)',
  medium: '@media (min-width: 720px)',
  large: '@media (min-width: 1200px)',
};

souporserious

import { Project } from 'ts-morph';
import { capitalCase } from 'case-anything';

const project = new Project();

project.addSourceFilesAtPaths([
  `src/pages/**/*{.tsx,.mdx,.json}`,
  `!src/pages/_*.tsx`,
  `!src/pages/api/*.ts`,
]);

souporserious

import { useControls } from 'leva'
import { useRouter } from 'next/router'
import * as queryString from 'query-string'

const roundValue = (value) => Math.round(value * 100) / 100
const parseValue = (value) => {
  if (typeof value === 'number') {
    return roundValue(value)
  }
  return value

souporserious

import type { TransitionEvent } from 'react'
import { useLayoutEffect, useRef, useState } from 'react'

const transition = 'height 200ms ease-out'

export type CollapseProps = {
  children: React.ReactNode

  /**
   * Controls whether or not children are visible.