benmvp

const myHOC = <Props: {}>(
    Component: React.ComponentType<{}>
): React.ComponentType<Props> (
    (props: Props) = {
        let handlers = genDynamicAdditionalProps(props.eventName)

        // The keys in `additionalProps` are dependent upon `props.eventName` value
        // The values in `additionalProps` are all functions
        
        let propsToPassThru = {...props}

benmvp

// This is what gets tested because it doesn't rely on any of
// the *magic* that may be in `withFoo` like reading context.
// The test just needs to pass in a valid `foo` prop which would've
// come from `withFoo`.
export const MyComponent = ({foo}) => (
  <div>{foo}</div>
)

// This what actually gets used in the app!
export default withFoo(MyComponent)

benmvp

// pass the children back to the component to be used
// in the final render
const Enhancer = ({render, children, foo}) => (
  <div>{render(foo * 2, children)}</div>
)

// ViewComp uses both `render` & `children` 🙃
const ViewComp = () => (
  <Enhancer foo={11} render={(value, children) => (<div>{value} - <span>{children}</span></div>)}>
    Here's some children content

benmvp

import React from 'react';

import TextInput from './TextInput';
import Label from './Label';

const TopSection = ({fields: {firstName, lastName}}) => (
  <fieldset>
    <div>
      <Label>First Name</Label>
      <TextInput name="firstName" value={firstName} />

benmvp

import {mapValues} from 'lodash';
import {Sdk, SdkConfig} from './types';
import request from './request';
import * as users from './users';

export * from './constants';

const DEFAULT_API_URL = 'https://www.eventbriteapi.com/v3';

benmvp

import React from 'react'

// React.ElementType from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8a31a2fe9e8417d47550db09e5f9f50fd09a8e60/types/react/index.d.ts#L67

interface Props<C extends React.ElementType> {
  children: React.ReactNode
  component?: C;
  gutterBottom?: boolean;
  className?: string;
  style?: CSSProperties;

benmvp

$colors: ("white": $white, "yellow": $yellow, "green": $green, "blue": $blue);

@each $name, $color in $colors {
  // this programmatically generates 4 class namaes in the resultant css.
  // but when Babel parses the module to pull out the class names, it just
  // gets "bg-color-#${name}" since postcss-scss doesn't compile the SCSS
  // (https://github.com/postcss/postcss-scss) when used with babel-react-css-modules
  // (https://github.com/gajus/babel-plugin-react-css-modules#configurate-syntax-loaders)
  .bg-color-#{$name} {
    background-color: #{$color};

benmvp

import React, { useState } from 'react'

const App = () => {
  const [inputValue, setInputValue] = useState('')
  const [isUpper, setIsUpper] = useState(false)

  return (
    <main>
      <h1>Giphy Search!</h1>

benmvp

name

deliberate

description

Structured iterative brainstorming and planning protocol for features, refactors, and technical designs. Use when the user says "brainstorm", "think through", "deliberate", begins describing a task with background context like "I want to... because... so that...", or references an existing spec file for implementation planning. Produces either an implementation plan (Plan Mode), a spec document, or a decision summary.

Deliberate

A structured protocol for iterative planning through brainstorming, critical feedback, and convergence.

Trigger

benmvp

Spec Document Template

Use this structure when writing spec documents. Adapt section depth to the complexity of the feature — not every spec needs every section.

Before writing: Read 1-2 existing specs in the target folder to match local conventions (tone, heading depth, use of tables vs prose, code example density).

Structure

# [Feature Name]