TP_UI: Explore front end repo by creating Shape component & stories

[wijohnst]

Hello & Welcome to ThrivingPark!

ThrivingPark is a "community operating system" built for the beautiful Driving Park neighborhood on the south-side of Columbus, Ohio. Thank you for contributing your time and talent to improve the lives of your (new) neighbors! We're glad that you're here!

This issue is part of the front end repository (repo) where we use technologies like Typescript, React, and Storybook to maintain ThrivingPark's UIs and component library. This issue is designed to introduce the core patterns that we use to build components. In this issue you will be building the Shape component, an intentionally simple "demo" component.

Don't let the simple designs fool you though. Even the most basic component should conform to the conventions and styles that underpin all of our front end work.

One of the principals that we use to design and implement our FE components is called Atomic Design. This methodology helps us to break our front ends into their most discrete units (Atoms) and assemble those basic building blocks into increasingly complex components and views. (Molecules and Pages). The Shape component that you'll be building is an Atom, so by its very nature it should be fairly simple.

Another principle that we will explore in this task and that we employ through the repo is Component Driven Development
. If Atomic Design is how we conceptualize and organize our components, Component Driven Development is how we implement them. By creating bottoms-up, modularized components we produce UIs that are simple to assemble and combine and that are infinitely reusable.

The tool that we use to manage both of these methodologies is Storybook. It allows us to isolate our components and organize them based on their Atomic taxonomy. It also provides functionality for creating "stories", which are the specific states for a given component.

In the case of the proposed Shape component we are asked to implement 3 stories:

1. Default
2. Rectangle
3. Color

To complete this task:

1. Create a task branch off of the main branch. Please follow the project naming convention and name your branch task/FE-140/Shape-Component
2. Create a new directory called Shape in src/stories/atoms
3. Add the appropriate files to the new Shape directory:

• Shape.tsx
• Shape.style.ts
• Shape.stories.tsx
• Shape.test.ts

4. Complete each of the file types, making sure to add the appropriate stories as per the designs
5. Submit PR for review