open-index/open-npm huggingface dataset:
npm package: @open-pioneer-community/window
Description: This package provides windowing system for draggable, resizable and closable UI widgets in Open-Pioneer Trails. This package uses [react-rnd](https://github.com/bokuweb/react-rnd) internally.
Latest version: 0.1.0

# @open-pioneer-community/window

This package provides windowing system for draggable, resizable and closable UI widgets in Open-Pioneer Trails.
This package uses [react-rnd](https://github.com/bokuweb/react-rnd) internally.

## Usage

Wrap a UI widget with the `Window` component to activate the window functionalities.

```tsx
const [windowClosed, setWindowClosed] = useState(false);

{
    !windowClosed && (
        <Window
            title="A Window"
            identifier="window1"
            top={10}
            left={10}
            width={280}
            height={280}
            minWidth={250}
            minHeight={250}
            closable={true}
            resizable={true}
            onClose={() => setWindowClosed(true)}
        >
            <Box>A draggable, resizable and closable Window</Box>
        </Window>
    );
}
```

## License

Apache-2.0 (see `LICENSE` file)

## Author

This work was originally contributed by [m-elseberg](https://github.com/m-elseberg).
npm package: @open-pioneer/chakra-integration
Description: Integrates Chakra UI into Open Pioneer Trails application.
Latest version: 3.1.0

# @open-pioneer/chakra-integration

This package integrates [Chakra UI](https://chakra-ui.com/) into an Open Pioneer Trails application.
All components are re-exported from `@chakra-ui/react` (sometimes with some modifications).
All UI packages using the Open Pioneer Trails framework should use this package instead of depending on `@chakra-ui/react` directly.

## Internals

Some changes are made to complex components such as `Modal`, `Drawer` etc. to support integration into a web component's shadow DOM.
For more details, see comments in `./Provider.tsx`.

## License

Apache-2.0 (see `LICENSE` file)
npm package: @open-pioneer/experimental-ol-layer-control
Description: This package provides a layer-control component based on open layers, which can be integrated besides a map to handle some functionality (toggling, opacity, ...) for the configured layers.
Latest version: 0.1.6

# @open-pioneer/experimental-ol-layer-control

This package provides a layer-control component based on open layers, which can be integrated besides a map to handle some functionality (toggling, opacity, ...) for the configured layers.

## Usage

### Map container component

Simply place the layer control component somewhere in your react template and add at least the mapId property, so that the layer control gets the corresponding map.

See here a simple integration of a layer control with a map id and visible opacity slider:

```jsx
<LayerControlComponent mapId="map_id" showOpacitySlider={true} />
```

For more configuration of the layer control check `./LayerControlComponent.tsx`.

## License

[Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0)
npm package: @open-pioneer/experimental-ol-map
Description: This package provides a map container component to integrate an [open layers](https://openlayers.org/) map into an open pioneer project. Besides the component, there is a service, which handles the registration and creation of a map.
Latest version: 0.1.6

# @open-pioneer/experimental-ol-map

This package provides a map container component to integrate an [open layers](https://openlayers.org/) map into an open pioneer project.
Besides the component, there is a service, which handles the registration and creation of a map.

## Usage

### Map container component

To integrate a map container in a react template, place it at the point where it should appear.
The wrapping component should provide 100% height.

The component itself uses the map registry service to create the map.
Therefore a unique map id should be defined.
With this map id, the map can be used in other component via the map registry service.
For more configuration of the map see in `./ProMapContainer.tsx` and check the .

Simple integration of a map container with an map id:

```jsx
<div height="100%">
    <MapContainer mapId="map_id"></MapContainer>
</div>
```

### Map registry service

The service is registered with the name `"ol-map.MapRegistry"`.
While injecting it the common way, you can access the map via the following snippet:

```ts
// get open layers map registry
const olMapRegistry = useService("ol-map.MapRegistry");
// get mapState with a given map id
const mapState = useAsync(async () => await olMapRegistry.getMap(MAP_ID));
```

## License

[Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0)