Adds transcript form

[allishultes]

Is your Pull Request request related to another issue in this repository ?

Issue #7

Describe what the PR does

• Adds a TranscriptForm component to the Storybook, which has been hook-ified and refactored from the Client. The TranscriptForm has been separated from the ApiWrapper, which was wrapped together in the Client. See: https://github.com/bbc/digital-paper-edit-client/blob/master/src/Components/Transcripts/TranscriptForm.js
• Refactors directory structure, removing ItemForm from the FormModal story
• Adds a FormModal story featuring TranscriptForm
• Adds a CustomAlert component as part of the TranscriptForm component, as per the ticket

State whether the PR is ready for review or whether it needs extra work

Ready

Additional context

Outstanding question: I'm not sure the CustomAlert should be a part of the TranscriptForm; when in the cycle would the TranscriptForm know that a transcription has failed? Because the ApiWrapper has now been decoupled, and that logic left to a parent component, we probably wouldn't pass error messages back down...? @jamesdools and @emettely let me know what you think.

[emettely]

this logic of showAlert should be in the place where it's importing this CustomAlert. I wonder if in storybooks you can add a button to toggle the alert to come up?

[allishultes]

Ooh yeah - I think that's the knobs. I'll try and add one :)

[allishultes]

So I'm not sure knobs work as expected with functional components — I've managed to allow users to toggle a button to turn the alert on and off, but the component doesn't re-render when the props change using the add-on.

I have separated the CustomAlert from the TranscriptCard; I think you're right in that that will be handled by the parent component.

[emettely]

The showAlert should probably be a state of the parent component 🤔 which also implies that maybe the actual handling functions should also be in the parent component.

[allishultes]

Some comments re: the code review:

• I'm unsure whether Storybook Knobs, which allow users to control props, etc ‚ works with functional components. I spent a few hours trying to set up a knob that lets them turn CustomAlert on/off, but didn't have much success. I'll make a card about looking further into it for the backlog.
• I've pulled CustomAlert out of the TranscriptForm — I think you're right, this should be handled by the wrapper.
• I also didn't see file.path ever being used so I've removed it.
• I merged withmaster and also cleaned up a few console errors after you finished your review, @emettely so that's what's up with new files :)

[emettely]

suggestion: ShowAlert in parent component as state? Maybe this is a bigger refactor step. Might be something we can put off for a bit. Everything else seems good though! Just wanted to get your thoughts on it :)

[emettely]

The showAlert should probably be a state of the parent component 🤔 which also implies that maybe the actual handling functions should also be in the parent component.

[allishultes]

suggestion: ShowAlert in parent component as state? Maybe this is a bigger refactor step. Might be something we can put off for a bit. Everything else seems good though! Just wanted to get your thoughts on it :)

No definitely agree! I think a step further down the line because so far, there isn't a parent component in Storybook. But agree 100%