Fix package namespacing and imports

[ben-ryder]

Right now components can be used like this:

import { base } from '@ben-ryder/jigsaw';

<base.Button>Hello World</base.Button>

import { styles } from '@ben-ryder/jigsaw';

<styles.Button>Hello World</styles.Button>

I would like to use components like this instead:

import { Button } from '@ben-ryder/jigsaw/base';

<Button>Hello World</Button>

import { Button } from '@ben-ryder/jigsaw/styled';

<Button>Hello World</Button>

[ben-ryder]

I'm pretty sure this is possible, I've seem similar methodologies used in a few places:

• @heroicons/react (@heroicons/react/outline or @heroicons/react/solid)
• typeorm (typeorm or typeorm/browser)

[ben-ryder]

0.0.2 is an improvement, but isn't quite perfect yet:

import { Button } from '@ben-ryder/jigsaw/dist/base';
import { Button } from '@ben-ryder/jigsaw/dist/styled';

[ben-ryder]

0.0.4 fixes the import functionality:

import { Button } from '@ben-ryder/jigsaw/base';
import { Button } from '@ben-ryder/jigsaw/styled';

but using in a CRA project is breaking the webpack build:

Module not found: Error: Can't resolve '@ben-ryder/jigsaw/styled' in '<location>/athena/projects/athena-web/src/pages'

 Field 'browser' doesn't contain a valid alias configuration <location>/athena/projects/athena-web/node_modules/@ben-ryder/jigsaw/styled...

[ben-ryder]

I've tried various configurations of rollup, babel etc and no luck. I think it's possible, but I've not really got the JS packaging knowledge to pull it off at the moment.

For simplicity of build system and usability etc I'm going to stick with just using tsc and import exerthing directly from the package like so:

import { Button, BaseButton } from '@ben-ryder/jigsaw';

This still lets consuming applications import the styled or base components and doesn't introduce complexities or tree shaking issues etc. The only compromise is that base components will have to be named BaseComponent/BaseComponentChild or similar, but that's not really an issue.