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}