[v4] Add usePolaris/AppBridge

[AndrewMusgrave]

WHY are these changes introduced?

Preparing for hooks

WHAT is this pull request doing?

• create a new directory for hooks src/hooks
• create usePolaris hook for internal use
• create useAppBridge hook for external use
• 🎉 tests 🎉

🎩

Trust in the powers of tests or try the playground - you'll need credentials for testing useAppBridge

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page, AppProvider, Card} from '../src';
import {usePolaris, useAppBridge} from '../src/hooks';

interface State {}

const credentials = {
  apiKey: undefined,
  shopOrigin: undefined,
}

export default function() {
  const {apiKey, shopOrigin} = credentials;
  return (
    <AppProvider apiKey={apiKey} shopOrigin={shopOrigin}>
      <Page title="Playground">
        <Card title="usePolaris">
          {JSON.stringify(usePolaris(), null, 2)}
        </Card>

        <Card title="useAppBridge">
          {!apiKey && !shopOrigin ? "You'll need real credentials or this is undefined :shocked:" : '' }
          {JSON.stringify(useAppBridge())}
        </Card>
      </Page>
    </AppProvider>
  );
}

[AndrewMusgrave]

Need to use these in src/hooks and we can't dive into component folders from outside /components

[AndrewMusgrave]

We'll want this to expose appBridge rather than exporting usePolaris

[AndrewMusgrave]

Feel odd about this test. But we've done it before and I can't think of a better alternative.

[BPScott]

I'm a little late to the party on this one but I've got a thought:

Hooks should be pretty small and self contained - each hook would never sprawl across multiple files (unlike components that may have partner scss files and things like that). As such I don't think there's any value in creating a "folder per hook" hierarchy as there's only ever going to be one file (+ the test) for each hook within it.

With that in mind I don't think there's any value in having src/hooks/use-polaris/use-polaris.tsx it adds depth for no value, I think we should just put hooks directly in the hooks folder e.g.: src/hooks/use-polaris.ts and its test in src/hooks/tests/use-polaris.ts.