# Creating recomposed components

The intent of this writeup is to instruct others as to why `compose` exists and how to use it.

## Overview

Creating functional components in React is straightforward:

const Foo = (props) => {
  const someState = useFoo(props);
  
  return (
    <div>
      <Foo class={opinion} />
      <Bar class={opinion} />
      <button class={opinion}>X</button>
    </div>
  );
}

...but when we attach opinions of styling, default props, and which child components to use, we essentially hardcode a particular presentation, making the component more difficult to reuse.

This rigidity leads to people rebuilding things over an over, citing many of the following claims:

* Doesn't look like what I want
* I need something simpler
* References components I don't want
* Overriding styles is too fragile and adds unneeded bloat

What if we had tools which could help easily attach styling to components, as well as any opinions about the child components it renders, the default props it uses... without the overhead of HOC wrappers?

## Introducing `compose`

1. Create a base component
2. Attach styles to a component
3. Attach additional styles

## Creating components

### Base components

TODO: describe why/how we write base components

#### Defining state and using `mergeProps`
#### Defining the DOM structure
#### Managing accessibility

### Styling components

#### Defining rules for slots
#### Defining sub-component styling
### Defining modifiers and enum styling
#### Using css variables (how to use them in the stylesheet to make things configurable)
#### Theming (how a user can override token values)
#### Defining site token values
#### Defining component token values
#### Animations (???)
#### Static stylesheets