fix components layout + enhance preview app

[Sebastian-ubs]

1. fix BCV control (removing requirement to be wrapped in a pr-flex
2. fix vertical tabs spacing for any text direction
3. add RTL-LTR toggle to preview app
4. add "guide" section that shows examples of good and bad usage

This change is 

[jolierabideau]

This is awesome Sebastian! Thanks!

Reviewed 12 of 13 files at r1, 1 of 1 files at r2, all commit messages.
Reviewable status: all files reviewed, 6 unresolved discussions (waiting on @Sebastian-ubs)

---

lib/platform-bible-react/src/preview/direction-toggle.tsx line 9 at r2 (raw file):

export const DirToggle = React.forwardRef<
  HTMLButtonElement,
  ButtonProps & { direction: Direction; setDirection: Dispatch<SetStateAction<Direction>> }

Same comment about passing a handler instead

---

lib/platform-bible-react/src/preview/direction-toggle.tsx line 13 at r2 (raw file):

  const oppositeDirection = direction === 'rtl' ? 'ltr' : 'rtl';
  return (
    // eslint-disable-next-line no-alert

When we disable a rule, we add a comment above with an explanation.

---

lib/platform-bible-react/src/preview/direction-toggle.tsx line 19 at r2 (raw file):

        setDirection(oppositeDirection);
      }}
      // eslint-disable-next-line react/jsx-props-no-spreading

When we disable a rule, we add a comment above with an explanation.

---

lib/platform-bible-react/src/preview/components/basics.component.tsx line 39 at r2 (raw file):

          Wrapped
          <div>
            {/* eslint-disable-next-line no-alert */}

Same comment about adding an explanation

---

lib/platform-bible-react/src/preview/components/basics.component.tsx line 54 at r2 (raw file):

                <td>variant</td>
                <td>
                  {/* eslint-disable-next-line no-alert */}

Same comment about adding an explanation

---

lib/platform-bible-react/src/preview/components/guide.component.tsx line 18 at r2 (raw file):

  direction,
  setDirection,
}: HasDirection & { setDirection: Dispatch<SetStateAction<Direction>> }) {

I think good practice is to pass a handler that uses setDirection, like const handleChange = ( direction ) => { setDirection(direction) }, but I'm unsure how big of a deal it is.

[Sebastian-ubs]

Thanks for reviewing. I just do not understand the benefit of handleChange. Will be interested in learning :-)

Reviewable status: 4 of 14 files reviewed, 6 unresolved discussions (waiting on @jolierabideau)

[jolierabideau]

Thanks Sebastian!

[jolierabideau]

Reviewed 8 of 10 files at r3, 3 of 3 files at r4, all commit messages.
Reviewable status: all files reviewed, 6 unresolved discussions (waiting on @Sebastian-ubs)

[Sebastian-ubs]

Dismissed @jolierabideau from 6 discussions.
Reviewable status: complete! all files reviewed, all discussions resolved

---

lib/platform-bible-react/src/preview/direction-toggle.tsx line 9 at r2 (raw file):

Previously, jolierabideau wrote…

Same comment about passing a handler instead

Done

---

lib/platform-bible-react/src/preview/direction-toggle.tsx line 13 at r2 (raw file):

Previously, jolierabideau wrote…

When we disable a rule, we add a comment above with an explanation.

Done

---

lib/platform-bible-react/src/preview/direction-toggle.tsx line 19 at r2 (raw file):

Previously, jolierabideau wrote…

When we disable a rule, we add a comment above with an explanation.

Done

---

lib/platform-bible-react/src/preview/components/basics.component.tsx line 39 at r2 (raw file):

Previously, jolierabideau wrote…

Same comment about adding an explanation

Done

---

lib/platform-bible-react/src/preview/components/basics.component.tsx line 54 at r2 (raw file):

Previously, jolierabideau wrote…

Same comment about adding an explanation

Done

---

lib/platform-bible-react/src/preview/components/guide.component.tsx line 18 at r2 (raw file):

Previously, jolierabideau wrote…

I think good practice is to pass a handler that uses setDirection, like const handleChange = ( direction ) => { setDirection(direction) }, but I'm unsure how big of a deal it is.

Done