Hookify TextField, Toast, and TopBar examples

[AndrewMusgrave]

WHY are these changes introduced?

Convert examples to hooks

WHAT is this pull request doing?

Converting TextField, Toast, and TopBar class-based examples to hooks

STILL TO DO

I'm making quite a few pr's converting examples to hooks so I anticipate lots of unreleased.md conflicts, so I'll add the entry before I merge.

- Converted `TextField`, `Toast`, and `TopBar` examples to functional components ([#2135](https://github.com/Shopify/polaris-react/pull/2135))

How to 🎩

Make sure the behavior of the example mirrors the style guide

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[LauraAubin]

LGTM

[BPScott]

A bunch more cases where we can simplify toggles and avoid creating two functions over time

[BPScott]

Suggested change

	const toggleActive = useCallback(() => setActive(!active), [active]);
	const toggleActive = useCallback(() => setActive((state) => !state), []);

[LauraAubin]

For my understanding, how does this not modify all of the values in state if we only want to change active?

[AndrewMusgrave]

For some reason, I assumed set* didn't accept functions or callbacks. Guess I was wrong about the former 😄 I'll comb through my other examples and update them where it's needed.

For my understanding, how does this not modify all of the values in state if we only want to change active?

When using hooks your able to have a single state opposed to state objects in class-based components. If you do decide to use an object to hold state using useState, you won't be able to partially update state as you can in class base components.

const [booleanValue, setBooleanValue] = useState(false)
const toggleBooleanValue = useCallback(() => setActive(booleanValue => !booleanValue), []);

[BPScott]

Crosslinking ya to the other PR where I mentioned this, which has some explanations and links to docs #2126 (comment)