open-index/open-npm huggingface dataset:
npm package: @graphistry/share-component
Description: ## Arch
Author: Graphistry, Inc.
Latest version: 0.1.20

# Share Component

## Arch

* local isolated dev: create-react-app (unejected) run via docker-compose
  * storybook for nicer isolated dev
* integrated dev: webpack
  * native for prod, docker watcher for dev
  * -> volume mounts, including `node_modules/`, for live

We follow CRA for standalone (storybook, ...). CRA does not support library output nor in UMD (script-tag-friendly), so for integration scenarios like Nexus, we do an ejected version.

## Development

If using from another container, it should "just work" by autobuilding a local copy. Watchers take more work:

* Install: `docker compose build`
* Isolated live dev: 
  - storybook (default): `docker compose up` => `localhost:6006`
    - manual storybook: `docker compose run --service-ports frontend npm run storybook`
  - react (public/index.html): `docker compose run --service-ports frontend npm start` => `localhost:3000`
    - whenever it goes funny, do a `docker compose down -v` and restart, or page refresh
    - or try adding a local-only `.env` in the host with `FAST_REFRESH=false`
* Cross-module live dev: `./live.sh` (`docker compose run frontend npm run watch`)
  - ex: `./nc up` => `localhost:8000`
    - ... NOTE: Refresh browser for updates
  - Live emits at `build/js/share.js` (volume mounted)
    - ... which other dev containers are free to watch/mount
  - CRA version as `watch-cra`, except currently not publishing symbols some reason
    - ... so sticking with direct webpack mode, YOLO
* Cross-module one-shot dev: `docker compose run frontend npm run build-dev`
  - Emits `build/js/share.js` (volume mounted)

We use `webpack.config.js` + `.babelrc` as CRA currently does root index as entrypoint

## Production

Build:

```bash
docker compose build  # => npm i
docker compose run frontend npm run build-prod  # => emits build/ on host
```

Import:

`build/index.link.html`, `build/index.scripts.html`

## Use

```javascript
import React from "react";
import ShareModal from '@graphistry/share-component';
import 'bootstrap/dist/css/bootstrap.css';

export const widget = <ShareModal/>;
```