Roadmap for react-tile

[davidpfahler]

The idea here is to create a tile component that can render multiple types of content. That includes text, images, but also combine the two (i.e. background images). It should also allow for an icon overlay that indicates the type of content the tile stands for (play icon for a youtube video, photo icon for an instagram image etc.). It should automatically fit text to a useful font-size and cut text with ellipsis that is too long.

Steps

Inspiration: Thinking in React

• [x] start with a mock (post here)
• [x] break the UI into a component hierarchy and post it here
• [x] Write Dreamcode in README.md and push to feature branch
• [ ] Write unit tests and push to feature branch
• [ ] Make sure, tests are failing
• [x] Build a static version in React and push to feature branch
• [x] Identify the minimal (but complete) representation of UI state, if any (post here)
• [x] if the component has state, some tests should be passing, not all; write more test or rewrite if needed
• [x] Identify where your state should live, if any
• [x] Add inverse data flow - almost certainly not needed, but for sake of completeness

[davidpfahler]

Start with a mock

[davidpfahler]

Break the UI into a component hierarchy and post it here

• Tile (green)
  • SquareBox (purple)
  • FormattedText
  • TextCell (blue)
  • TimeRelative

Component names aren't great, but it's a start. FormattedText and TimeRelative are component not necessarily bound to a tile, so I will not develop them in this project. To relevant hierarchy the is:

• Tile (green)
  • SquareBox (purple)
  • TextCell (blue)

[davidpfahler]

Write unit tests and push to feature branch

Harder than expected. Deferred until I understand react better. Related question here: reddit.com/r/react. I think I'll do something like this:

t.deepEqual((
  React.createElement(<div>textcell</div>)
), React.createElement(TextCell))

[davidpfahler]

Build a static version in React and push to feature branch

Done. However, it turns out this is all we need, so next two steps are irrelevant here (for now).

Next up: write unit tests for current feature set, then for dreamcode feature set.