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]

benmvp

name

description

deliberate

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

import React, { useState } from 'react'

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

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

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 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

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';

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

// 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

// 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

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}