open-index/open-npm huggingface dataset:
npm package: @ott-smarttv/util-native
Description: Util detect platform SmartTV
Latest version: 1.2.5

# Osiris SmartTV Native Util

## Setup

```
NativeUtil.getInstance()?.loadScripts({
  scripts: undefined,
  onLoadSuccess: (data) => {
    ReactDOM.render(
      <App />
      ,
      document.getElementById('root')
    );
  },
})
```

## Example

```
useEffect(() => {
    (async () => {
      const res = await UtilNative.getInstance()?.getBaseInfo()
      setRes(() => res)
      console.log("🚀 ~ res:", res)
    })()
    UtilNative.getInstance()?.onEvent(ListenerEvent.NETWORK_CHANGE, (res) => 
     {
      console.log("🚀 ~ network:", res)
      setNetwork(() => res)
    })
    UtilNative.getInstance()?.onEvent(ListenerEvent.MOUSE_ENABLE, (e) => {
      console.log('mouse', e)
      setMouse(() => e)
    })
    UtilNative.getInstance()?.onEvent(ListenerEvent.STATUS_KEYBOARD_CHANGE, 
     (e) => {
      console.log('keyboard', e)
      setKeyboard(() => e)
    })
  }, [])
```
npm package: @ott_test/core-utils
Description: Core functionality that is shared among numerous UI components
Author: Evan Siroky
Latest version: 11.3.2-alpha.0

Includes various utility functions to assist with common operations dealing with OpenTripPlanner data.

This package depends on [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat), which is not supported by older browsers or node versions. [As can be seen here](https://caniuse.com/?search=Intl.DateTimeFormat), support is fairly significant across major browsers. Should older browsers need to be targeted, a polyfill can be added. Such a polyfill is available [here](https://formatjs.io/docs/polyfills/intl-datetimeformat/).

This package depends on the [date-fns library](https://date-fns.org), which relies on Node version 13 and above. Should this library be used for **server side rendering**, Node version 13 or above must be used.

## Usage

```
TBD
```
npm package: @ott_test/transit-vehicle-overlay
Description: Realtime Transit Vehicles Component
Author: Frank Purcell
Latest version: 2.3.1

## WHAT:

Presentational React Components used to build an interactive vehicle map (leaflet) overlay.
This component uses functional components and hooks (no more class components).

NOTE: eventually want this component (and OTP-UI in general) to support both leaflet and
mapbox gl libraries.

## HOW:

There is a type format for RT vehicle data in OTP-UI:
https://github.com/opentripplanner/otp-ui/blob/master/packages/core-utils/src/types.js#L54

This format was derived in this project to accord with a companion web service that delivers
realtime vehicle information information, based on GTFS-Realtime data
(https://github.com/OpenTransitTools/gtfsdb_realtime/blob/master/ott/gtfsdb_realtime/model/response/vehicle_list.py).

Other realtime vehicle data may be used with this layer. For example, there is demo code within the component that
shows converting another service response format (https://developer.trimet.org/ws_docs/vehicle_locations_ws.shtml)
to work with this layer.

## NOTES:

- The use of hooks was a good thing, but there's a bit of resulting redirection (HL functions, etc...)
  in the component lib (and interface) which obfuscates things a bit ... apologies in advance.
- 2 very useful utilities for converting .svg to React svg .js files:
  - https://jakearchibald.github.io/svgomg -- .svg optimizer
  - https://react-svgr.com/playground -- good .svg => .npx converter

## TODO:

1.  more / better unit tests
1.  mapbox gl
npm package: @ottabase/hello-world
Description: A simple hello world React component package
Latest version: 1.0.1

# @ottabase/hello-world

A simple, customizable React component that displays a friendly greeting message with beautiful default styling.

## Installation

```bash
npm install @ottabase/hello-world
```

## Usage

### Basic Usage

```tsx
import React from 'react';
import { HelloBox } from '@ottabase/hello-world';

function App() {
  return (
    <div>
      <HelloBox />
    </div>
  );
}

export default App;
```