open-index/open-npm huggingface dataset:
npm package: @nomadle/rescript-advertising
Description: ReScript bindings for react-advertising
Author: Nomadle
Latest version: 0.1.0

# @nomadle/rescript-advertising

ReScript bindings for [react-advertising](https://github.com/technology-ebay-de/react-advertising) - Display advertising via Google Ad Manager with Prebid.js support.

## Installation

```bash
npm install @nomadle/rescript-advertising react-advertising
# or
pnpm add @nomadle/rescript-advertising react-advertising
```

Add to your `rescript.json`:

```json
{
  "bs-dependencies": ["@nomadle/rescript-advertising"]
}
```

## Usage

```rescript
open ReactAdvertising

// Define ad slots
let slots = [
  Config.makeSlot(
    ~id="ad-banner",
    ~path="/1234567/ad-unit",
    ~sizes=[Config.Sizes.leaderboard, Config.Sizes.mediumRectangle],
    ~targeting=Js.Dict.fromArray([("key", "value")]),
  ),
]

// Create config
let config = Config.make(~slots)

// Wrap your app with Provider
@react.component
let make = () => {
  <Provider config={config}>
    <div>
      <Slot id="ad-banner" className="ad-container" />
    </div>
  </Provider>
}
```

## License

MIT
npm package: @nomadle/rescript-avatar-editor
Description: ReScript bindings for react-avatar-editor
Author: Nomadle
Latest version: 0.1.0

# @nomadle/rescript-avatar-editor

ReScript bindings for [react-avatar-editor](https://github.com/mosch/react-avatar-editor) - A Facebook-like avatar / profile picture component.

## Installation

```bash
npm install @nomadle/rescript-avatar-editor react-avatar-editor
# or
pnpm add @nomadle/rescript-avatar-editor react-avatar-editor
```

Add to your `rescript.json`:

```json
{
  "bs-dependencies": ["@nomadle/rescript-avatar-editor"]
}
```

## Usage

### Basic Example

```rescript
open ReactAvatarEditor

@react.component
let make = () => {
  let editorRef = React.useRef(Js.Nullable.null)
  let (scale, setScale) = React.useState(() => 1.0)
  let (position, setPosition) = React.useState(() => {x: 0.5, y: 0.5})

  let handleSave = () => {
    switch getEditorInstance(editorRef) {
    | Some(editor) =>
      let canvas = editor->getImageScaledToCanvas
      // Do something with the canvas
      Js.log(canvas)
    | None => ()
    }
  }

  <div>
    <ReactAvatarEditor
      ref={editorRef}
      image={Url("/path/to/image.jpg")}
      width={200}
      height={200}
      border={50}
      borderRadius={100}
      color={(0, 0, 0, 0.5)}
      scale={scale}
      position={position}
      onPositionChange={pos => setPosition(_ => pos)}
    />
    <input
      type_="range"
      min="1"
      max="2"
      step="0.01"
      value={scale->Float.toString}
      onChange={e => {
        let value = (e->ReactEvent.Form.target)["value"]
        setScale(_ => value->Float.fromString->Option.getOr(1.0))
      }}
    />
    <button onClick={_ => handleSave()}>
      {React.string("Save")}
    </button>
  </div>
}
```

### Using with Blob

```rescript
let handleFileChange = (event, setImageBlob) => {
  let files = event->ReactEvent.Form.target->(t => t["files"])
  switch files->Array.get(0) {
  | Some(file) =>
    let blob = file->Webapi.File.toBlob
    setImageBlob(_ => Some(blob))
  | None => ()
  }
}

@react.component
let make = () => {
  let (imageBlob, setImageBlob) = React.useState(() => None)

  switch imageBlob {
  | Some(blob) =>
    <ReactAvatarEditor
      image={Blob(blob)}
      width={250}
      height={250}
      border={25}
    />
  | None =>
    <input type_="file" accept="image/*" onChange={e => handleFileChange(e, setImageBlob)} />
  }
}
```

### Accessing Editor Methods

```rescript
let editorRef = React.useRef(Js.Nullable.null)

// Get the editor instance
switch getEditorInstance(editorRef) {
| Some(editor) =>
  // Get the image as a canvas element
  let canvas = editor->getImage
  
  // Get the scaled image
  let scaledCanvas = editor->getImageScaledToCanvas
| None => ()
}
```

## License

MIT
npm package: @nomadle/rescript-fuse
Description: ReScript bindings for fuse.js
Author: Nomadle
Latest version: 0.1.0

# @nomadle/rescript-fuse

ReScript bindings for [Fuse.js](https://www.fusejs.io/) - a lightweight fuzzy-search library.

## Features

- ✅ Type-safe fuzzy search bindings
- ✅ Configurable search options (keys, threshold)
- ✅ Generic support for any data type
- ✅ Zero runtime overhead

## Installation

```bash
npm install @nomadle/rescript-fuse fuse.js
# or
pnpm add @nomadle/rescript-fuse fuse.js
```

Add to your `rescript.json`:

```json
{
  "bs-dependencies": ["@nomadle/rescript-fuse"]
}
```

## Usage

### Basic Search

```rescript
open Fuse

// Define your data type
type book = {
  title: string,
  author: string,
}

// Create data array
let books = [
  {title: "The Great Gatsby", author: "F. Scott Fitzgerald"},
  {title: "To Kill a Mockingbird", author: "Harper Lee"},
]

// Create Fuse instance with options
let fuse = make(books, {
  keys: ["title", "author"],
  threshold: 0.4,
})

// Search
let results = fuse->search("gatsby")
// results: array<{item: book, refIndex: int, score: float}>
```

### Country Matching Example

```rescript
open Fuse

type country = {
  name: string,
  code: string,
}

let countries = [
  {name: "United States", code: "US"},
  {name: "United Kingdom", code: "UK"},
]

let fuse = make(countries, {
  keys: ["name"],
  threshold: 0.3,
})

let matches = fuse->search("united")
```

## API

### `make(array<'a>, fuseOptions) => 'fuse`

Creates a new Fuse instance.

### `fuseOptions`

```rescript
type fuseOptions = {
  keys: array<string>,
  threshold: float, // 0.0 = exact match, 1.0 = match anything
}
```

### `search('fuse, string) => array<fuseResult<'a>>`

Performs a fuzzy search and returns matching results.

```rescript
type fuseResult<'item> = {
  item: 'item,
  refIndex: int,
  score: float, // 0.0 = perfect match, 1.0 = worst match
}
```

## License

MIT
npm package: @nomadle/rescript-leaflet
Description: ReScript bindings for Leaflet
Author: Nomadle
Latest version: 0.1.0

# @nomadle/rescript-leaflet

ReScript bindings for [Leaflet](https://leafletjs.com/) - the leading open-source JavaScript library for mobile-friendly interactive maps.

## Installation

```bash
npm install @nomadle/rescript-leaflet
```

## Usage

Add `@nomadle/rescript-leaflet` to your `bs-dependencies` in `rescript.json`:

```json
{
  "bs-dependencies": [
    "@nomadle/rescript-leaflet"
  ]
}
```

Don't forget to include Leaflet CSS in your HTML:

```html
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
```

## API

### Types

- `position` - Tuple of (lat, lng) as `(float, float)`
- `bounds` - Array of positions `array<position>`
- `map` - Opaque type for Leaflet map instance

### LatLng

```rescript
let ll = LatLng.make(51.505, -0.09)
let lat = LatLng.lat(ll)
let lng = LatLng.lng(ll)
```

### LatLngBounds

```rescript
let bounds = LatLngBounds.make((51.5, -0.1), (51.51, -0.11))
let center = LatLngBounds.getCenter(bounds)
```

### Point

```rescript
let pt = Point.make(100.0, 200.0)
```

### Icon

```rescript
let icon = Icon.createDefault(~iconUrl="/marker.png", ())
let divIcon = Icon.createDivIcon(~html="<div>Marker</div>", ())
```

### PathOptions

```rescript
let opts = PathOptions.make(
  ~color="#ff0000",
  ~weight=3,
  ~opacity=1.0,
  ~fillColor="#ff6666",
  ~fillOpacity=0.5,
  ()
)
```

### EventTypes

Types for Leaflet event objects with accessors:
- `mouseEvent` - Mouse event with latlng, type, target
- `leafletEvent` - Base event type
- `leafletMouseEvent` - Mouse event with additional properties

### EventHandlers

```rescript
let handlers = EventHandlers.make(
  ~click=event => (),
  ~mouseover=event => (),
  ()
)
```

### Classes

- `Map` - Create and manipulate Leaflet maps
- `TileLayer` - Tile layers
- `Marker` - Markers
- `Circle`, `CircleMarker` - Circle shapes
- `Polyline`, `Polygon` - Line/polygon shapes
- `Rectangle` - Rectangle shape
- `ImageOverlay` - Image overlay
- `GeoJSON` - GeoJSON layer
- `LayerGroup`, `FeatureGroup` - Layer containers
- `Control`, `ScaleControl` - Map controls

Each class provides methods like `addTo`, `remove`, `setStyle`, etc.

## React-Leaflet

For React-Leaflet bindings, see [@nomadle/rescript-react-leaflet](/packages/react-leaflet).

## License

MIT
npm package: @nomadle/rescript-pixi
Description: ReScript bindings for pixi.js and @pixi/react
Author: Nomadle
Latest version: 0.1.0

# @nomadle/rescript-pixi

ReScript bindings for [pixi.js](https://pixijs.com/) (v8) and [@pixi/react](https://github.com/pixijs/pixi-react) - 2D WebGL renderer with React integration.

## Installation

```bash
npm install @nomadle/rescript-pixi pixi.js @pixi/react
# or
pnpm add @nomadle/rescript-pixi pixi.js @pixi/react
```

Add to your `rescript.json`:

```json
{
  "bs-dependencies": ["@nomadle/rescript-pixi"]
}
```

## Usage

### Pixi.js Core

```rescript
open Pixi

// Create an application
let app = createApplication()

// Initialize with options
let init = async () => {
  await app->init({
    "width": Some(800),
    "height": Some(600),
    "backgroundColor": Some(0x1099bb),
    "antialias": Some(true),
    "resolution": Some(1.0),
  })
  
  // Get canvas and append to DOM
  let canvas = app->canvas
  // append canvas to your container...
  
  // Create a graphics object
  let graphics = createGraphics()
  graphics
    ->rect(50.0, 50.0, 100.0, 100.0)
    ->fill(0xff0000)
  
  // Add to stage
  app->stage->addChild(graphics)
}
```

### React Components

```rescript
open PixiReact

@react.component
let make = () => {
  <Stage width=800 height=600 options={Some({"background": 0x1099bb})}>
    <Container x={Some(100.0)} y={Some(100.0)}>
      <Sprite 
        image="/assets/bunny.png" 
        x={Some(0.0)} 
        y={Some(0.0)}
        anchor={Some(0.5)}
      />
      <Text 
        text="Hello Pixi!" 
        x={Some(0.0)} 
        y={Some(50.0)}
        style={Some({"fontSize": 24, "fill": 0xffffff})}
      />
    </Container>
  </Stage>
}
```

### Animation Hook

```rescript
open PixiReact

@react.component
let make = () => {
  let (rotation, setRotation) = React.useState(() => 0.0)
  
  useTick(delta => {
    setRotation(r => r + 0.01 *. delta)
  })
  
  <Sprite 
    image="/assets/sprite.png" 
    rotation={Some(rotation)}
  />
}
```

## License

MIT
npm package: @nomadle/rescript-react-leaflet
Description: ReScript bindings for React-Leaflet
Author: Nomadle
Latest version: 0.1.0

# @nomadle/rescript-react-leaflet

ReScript bindings for [React-Leaflet](https://react-leaflet.js.org/).

## Installation

```bash
npm install @nomadle/rescript-react-leaflet
```

Requires `@nomadle/rescript-leaflet` as a peer dependency:

```bash
npm install @nomadle/rescript-leaflet
```

## Usage

Add `@nomadle/rescript-leaflet` and `@nomadle/rescript-react-leaflet` to your `bs-dependencies` in `rescript.json`:

```json
{
  "bs-dependencies": [
    "@rescript/react",
    "@nomadle/rescript-leaflet",
    "@nomadle/rescript-react-leaflet"
  ]
}
```

## Example

```rescript
open ReactLeaflet
open Leaflet

let mapElement = <MapContainer
  center=(51.505, -0.09)
  zoom=13
  style={ReactDOM.Style.make(~width="100%", ~height="500px", ())}
>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&copy; OpenStreetMap contributors"
  />
  <Marker position=(51.505, -0.09) />
</MapContainer>
```

## API

### Components

- `MapContainer` - Main map component
- `TileLayer` - Tile map layer
- `Marker` - Marker component
- `Popup` - Popup component
- `Tooltip` - Tooltip component
- `Circle`, `CircleMarker`, `Rectangle` - Shape components
- `Polyline`, `Polygon` - Line/polygon components
- `LayerGroup`, `FeatureGroup` - Layer containers
- `WMSTileLayer`, `ImageOverlay` - Additional layer types
- `GeoJSON` - GeoJSON layer
- `ScaleControl`, `ZoomControl`, `AttributionControl` - Map controls

### Hooks

- `Hooks.useMap()` - Get the Leaflet map instance
- `Hooks.useMapEvents(MapEvents.t)` - Subscribe to map events
- `Hooks.useMapEvent(string, handler)` - Subscribe to a single event type

### Types

- `Leaflet.position` - Tuple of (lat, lng)
- `Leaflet.bounds` - Array of positions
- `PathOptions.t` - Path styling options
- `EventHandlers.t` - Event handler object
- `MapEvents.t` - Map event handler object
npm package: @nomadle/rescript-react-select
Description: ReScript bindings for react-select
Author: Nomadle
Latest version: 0.1.0

# @nomadle/rescript-react-select

ReScript bindings for [react-select](https://react-select.com/) - A flexible and beautiful Select Input control for React.

## Installation

```bash
npm install @nomadle/rescript-react-select react-select
# or
pnpm add @nomadle/rescript-react-select react-select
```

Add to your `rescript.json`:

```json
{
  "bs-dependencies": ["@nomadle/rescript-react-select"]
}
```

## Usage

### Basic Select

```rescript
open ReactSelect

let options = [
  {value: "apple", label: "Apple"},
  {value: "banana", label: "Banana"},
  {value: "orange", label: "Orange"},
]

@react.component
let make = () => {
  let (selected, setSelected) = React.useState(() => Js.Nullable.null)

  <Select
    options={options}
    value={selected}
    onChange={opt => setSelected(_ => opt)}
    placeholder="Select a fruit..."
    isClearable={true}
    isSearchable={true}
  />
}
```

### Async Select

```rescript
open ReactSelect

let loadOptions = (inputValue: string) => {
  Fetch.fetch(`/api/search?q=${inputValue}`)
  ->Promise.then(Fetch.Response.json)
  ->Promise.then(json => {
    // Parse and return array of selectOption
    Promise.resolve(options)
  })
}

@react.component
let make = () => {
  <AsyncSelect
    loadOptions={loadOptions}
    placeholder="Search..."
    defaultOptions={[{value: "1", label: "Default"}]}
  />
}
```

### Creatable Select

```rescript
open ReactSelect

@react.component
let make = () => {
  let (options, setOptions) = React.useState(() => [
    {value: "existing", label: "Existing Option"},
  ])

  let handleCreate = (newValue: string) => {
    let newOption = {value: newValue, label: newValue}
    setOptions(prev => prev->Array.concat([newOption]))
    Js.log("Created: " ++ newValue)
  }

  <CreatableSelect
    options={options}
    onCreateOption={handleCreate}
    placeholder="Select or create..."
    isClearable={true}
  />
}
```

## License

MIT
npm package: @nomadle/rescript-supabase
Description: ReScript bindings for @supabase/supabase-js
Author: Nomadle
Latest version: 0.2.0

[![npm](https://img.shields.io/npm/v/@nomadle/rescript-supabase.svg)](https://www.npmjs.com/package/@nomadle/rescript-supabase)

# @nomadle/rescript-supabase

ReScript bindings for [@supabase/supabase-js](https://github.com/supabase/supabase-js) - the official Supabase JavaScript client.

## Features

- ✅ Authentication (signUp, signIn, signOut, OAuth, etc.)
- ✅ Database queries (PostgREST)
- ✅ Storage operations
- ✅ Realtime subscriptions
- ✅ Type-safe query builder

## Installation

```bash
npm install @nomadle/rescript-supabase @supabase/supabase-js
# or
pnpm add @nomadle/rescript-supabase @supabase/supabase-js
```

Add to your `rescript.json`:

```json
{
  "bs-dependencies": ["@nomadle/rescript-supabase"]
}
```

## Usage

### Create Client

```rescript
open Supabase

let supabaseUrl = "https://your-project.supabase.co"
let supabaseKey = "your-anon-key"

let supabase = createClient(supabaseUrl, supabaseKey)
```

### Authentication

```rescript
// Sign up
let signUp = async () => {
  let response = await supabase->auth->signUp({
    "email": "user@example.com",
    "password": "password123"
  })
  
  switch response.error->Js.Nullable.toOption {
  | Some(error) => Js.log(error.message)
  | None => Js.log("Success!")
  }
}

// Sign in
let signIn = async () => {
  let response = await supabase->auth->signInWithPassword({
    "email": "user@example.com",
    "password": "password123"
  })
  // Handle response...
}

// OAuth sign in
let signInWithGoogle = () => {
  supabase->auth->signInWithOAuth({"provider": "google"})
}
```

### Database Queries

```rescript
// Select all
let getUsers = async () => {
  let response = await supabase
    ->fromTable("users")
    ->select("*")
    ->execute
    
  response.data
}

// Filter
let getActiveUsers = async () => {
  let response = await supabase
    ->fromTable("users")
    ->select("*")
    ->eq("active", true)
    ->order("created_at", {"ascending": false})
    ->limit(10)
    ->execute
    
  response.data
}

// Insert
let createUser = async (user) => {
  let response = await supabase
    ->fromTable("users")
    ->insert(user)
    ->execute
}
```

### Storage

```rescript
// Upload file
let uploadFile = async (file, path) => {
  let response = await supabase
    ->storage
    ->from("avatars")
    ->upload(path, file, {"upsert": Some(true)})
}

// Get public URL
let getAvatarUrl = (path) => {
  supabase
    ->storage
    ->from("avatars")
    ->getPublicUrl(path)
}
```

## License

MIT
npm package: @nomadle/rescript-world-map
Description: ReScript bindings for react-world-map
Author: Nomadle
Latest version: 0.1.0

# @nomadle/rescript-world-map

ReScript bindings for [react-world-map](https://github.com/scottsidwell/react-world-map) - a simple, interactive SVG world map component for React.

## Installation

```bash
npm install @nomadle/rescript-world-map react-world-map
# or
pnpm add @nomadle/rescript-world-map react-world-map
```

Add to your `rescript.json`:

```json
{
  "bs-dependencies": ["@nomadle/rescript-world-map"]
}
```

## Usage

### Basic Example

```rescript
open ReactWorldMap

@react.component
let make = () => {
  let (selected, setSelected) = React.useState(() => None)

  <WorldMap
    selected={selected}
    onSelect={continent => {
      let parsed = ReactWordMapTypes.continentFromString(continent)
      setSelected(_ => parsed)
    }}
  />
}
```

### With Continent Type Helpers

```rescript
open ReactWorldMap

@react.component
let make = () => {
  let (selected, setSelected) = React.useState(() => None)

  let handleSelect = continentString => {
    switch ReactWordMapTypes.continentFromString(continentString) {
    | Some(continent) => {
        setSelected(_ => Some(continent))
        Js.log("Selected: " ++ ReactWordMapTypes.continentToFullName(continent))
      }
    | None => Js.log("Unknown continent")
    }
  }

  let selectedCode = selected->Option.map(ReactWordMapTypes.continentToString)

  <div>
    <WorldMap selected={selectedCode} onSelect={handleSelect} />
    {selected
    ->Option.map(continent =>
      <p>{("Selected: " ++ ReactWordMapTypes.continentToFullName(continent))->React.string}</p>
    )
    ->Option.getOr(React.null)}
  </div>
}
```

### Multiple Selection Mode

```rescript
open ReactWorldMap

@react.component
let make = () => {
  <WorldMap
    multiple=true
    onSelect={continent => Js.log("Selected: " ++ continent)}
  />
}
```

## Props

These props mirror the underlying `react-world-map` API:

| Prop | Type | Description |
|------|------|-------------|
| `selected` | `string` | The currently selected continent code, e.g. `"na"` (optional) |
| `onSelect` | `string => unit` | Callback when a continent is clicked |
| `multiple` | `bool` | Allow multiple selections in uncontrolled mode (optional) |

> **Note:** The binding stays faithful to the original JS component. If you use a custom wrapper that accepts `selectedContinent`, `onHover`, `onMouseLeave`, or `className`, that logic belongs in your application layer, not in this binding.

## Continent Types

The `ReactWordMapTypes` module provides type-safe helpers for working with continent codes:

- `continent` - A polymorphic variant type for continents:
  - `#NorthAmerica` ("na")
  - `#SouthAmerica` ("sa")
  - `#Africa` ("af")
  - `#Europe` ("eu")
  - `#Asia` ("as")
  - `#Oceania` ("oc")

- `continentFromString(string)` - Parse a string to a continent option
- `continentToString(continent)` - Convert a continent to its code
- `continentToFullName(continent)` - Convert a continent to its full name

## License

MIT
npm package: @nomadprogrammer/likha
Description: Vanilla JavaScript wrapper for Likha editor - works without build tools
Author: Shiv Singh
Latest version: 0.0.1
Deprecated: Package moved to @likhaeditor/likhaeditor - please update your dependencies

# @likha/html

Vanilla JavaScript wrapper for Likha editor - works without build tools.

## Installation

### npm

```bash
npm install @likha/html
```

### CDN

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@likha/html/dist/likha-editor.css">
<script src="https://cdn.jsdelivr.net/npm/@likha/html/dist/likha-editor.umd.js"></script>
```

## Usage

### ES Module

```javascript
import { createEditor } from '@likha/html';
import '@likha/html/style.css';

createEditor({
  element: '#editor',
  content: '<p>Start writing...</p>'
});
```

### CDN (Browser)

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@likha/html/dist/likha-editor.css">
</head>
<body>
  <div id="editor"></div>

  <script src="https://cdn.jsdelivr.net/npm/@likha/html/dist/likha-editor.umd.js"></script>
  <script>
    const { createEditor } = LikhaEditor;
    
    createEditor({
      element: document.getElementById('editor'),
      content: '<p>Hello, Likha!</p>'
    });
  </script>
</body>
</html>
```

## Features

- No build tools required
- Full toolbar with all formatting options
- Customizable toolbar buttons
- Works in all modern browsers
- TypeScript support

## Custom Toolbar

```javascript
createEditor({
  element: '#editor',
  toolbarButtons: [
    'heading',
    'bold',
    'italic',
    'link',
    'bulletList',
    'orderedList'
  ]
});
```

## Documentation

Full documentation: https://github.com/ProgrammerNomad/likha

## License

MIT © [Shiv Singh](https://github.com/ProgrammerNomad)
npm package: @nomadprogrammer/likha-core
Description: Core editor engine for Likha - framework-agnostic
Author: Shiv Singh
Latest version: 0.0.1
Deprecated: Package moved to @likhaeditor/core - please update your dependencies

# @likha/core

Core editor engine for Likha - framework-agnostic rich text editor built on ProseMirror.

## Installation

```bash
npm install @likha/core
# or
pnpm add @likha/core
# or
yarn add @likha/core
```

## Usage

```typescript
import { Editor } from '@likha/core';

const editor = new Editor({
  element: document.getElementById('editor'),
  content: '<p>Hello, Likha!</p>'
});
```

## Features

- Framework-agnostic ProseMirror-based editor
- Plugin architecture
- TypeScript support
- Full keyboard navigation
- Undo/redo support

## Documentation

Full documentation: https://github.com/ProgrammerNomad/likha

## License

MIT © [Shiv Singh](https://github.com/ProgrammerNomad)

// Get content
const html = editor.getHTML();

// Set content
editor.setContent('<p>New content</p>');

// Focus
editor.focus();

// Cleanup
editor.destroy();
```

## Features

- Framework-agnostic
- Built on ProseMirror
- Undo/Redo support
- Extensible via plugins
- TypeScript support

## License

MIT
npm package: @nomadprogrammer/likha-plugins
Description: Official plugins for Likha editor
Author: Shiv Singh
Latest version: 0.0.1
Deprecated: Package moved to @likhaeditor/plugins - please update your dependencies

# @likha/plugins

Official plugins for Likha editor.

## Installation

```bash
npm install @likha/plugins @likha/core
```

## Usage

```typescript
import { Editor } from '@likha/core';
import { BulletListPlugin, OrderedListPlugin } from '@likha/plugins';

const editor = new Editor({
  element: document.getElementById('editor'),
  plugins: [
    new BulletListPlugin(),
    new OrderedListPlugin()
  ]
});
```

## Available Plugins

- **Lists**: BulletListPlugin, OrderedListPlugin
- **Text Formatting**: StrikethroughPlugin, SubscriptPlugin, SuperscriptPlugin
- **Blocks**: BlockquotePlugin, CodeBlockPlugin
- **Links**: LinkPlugin
- **Media**: ImagePlugin, TablePlugin
- **Colors**: TextColorPlugin, HighlightPlugin
- **Alignment**: TextAlignmentPlugin
- **Utilities**: ClearFormattingPlugin, PlaceholderPlugin, CharacterCountPlugin

## Documentation

Full documentation: https://github.com/ProgrammerNomad/likha

## License

MIT © [Shiv Singh](https://github.com/ProgrammerNomad)
npm package: @nomadprogrammer/likha-ui
Description: UI components for Likha editor
Author: Shiv Singh
Latest version: 0.0.1
Deprecated: Package moved to @likhaeditor/ui - please update your dependencies

# @likha/ui

UI components for Likha editor - toolbars, menus, and controls.

## Installation

```bash
npm install @likha/ui @likha/core
```

## Usage

```typescript
import { Toolbar } from '@likha/ui';
import { Editor } from '@likha/core';

const editor = new Editor({ element: document.getElementById('editor') });
const toolbar = new Toolbar({
  container: document.getElementById('toolbar'),
  buttons: [/* button config */]
});
```

## Features

- Customizable toolbar
- Menu bar component
- Color pickers
- Button components
- Dropdown menus
- Theme support

## Documentation

Full documentation: https://github.com/ProgrammerNomad/likha

## License

MIT © [Shiv Singh](https://github.com/ProgrammerNomad)
npm package: @nomadreservations/createjs-module
Description: Collection of libraries in the CreateJS suite for Angular and Ionic.
Author: AJ Barry
Latest version: 1.0.0-beta.5

# CreateJS library module for Angular and Ionic

This is the createjs-0.8.2 collection.
***Now with typings!!!***

* EaselJS
* TweenJS
* SoundJS
* PreloadJS

You can find documentation at [CreateJS](http://blog.createjs.com/).



## Install

```bash
npm install createjs-module --save
```

**Angular**
```ts
import { Component, AfterViewInit } from '@angular/core';
import * as createjs from 'createjs-module';

@Component({
  selector: 'app-root',
  template: '<canvas width="500" height=500 id="demoCanvas"></canvas>'
})
export class AppComponent implements AfterViewInit {

  ngAfterViewInit() {
    var stage = new createjs.Stage("demoCanvas");
    var circle = new createjs.Shape();
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
    circle.x = 10;
    circle.y = 10;
    stage.addChild(circle);

    stage.update();

    createjs.Tween.get(circle, { loop: true })
    .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
    .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
    .to({ alpha: 0, y: 225 }, 100)
    .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
    .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);
  }

}
```

**Ionic**
```ts
import {Component} from '@angular/core';
import * as createjs from 'createjs-module';

@Component({
  selector: 'project-name-app',
  template: `
    <ion-content padding>
     <canvas width="500" height=500 id="demoCanvas"></canvas>
    </ion-content>
  `
})
export class MyApp {
  ionViewDidEnter() {
    var stage = new createjs.Stage("demoCanvas");
    var circle = new createjs.Shape();
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
    circle.x = 10;
    circle.y = 10;
    stage.addChild(circle);

    stage.update();

    createjs.Tween.get(circle, { loop: true })
    .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
    .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
    .to({ alpha: 0, y: 225 }, 100)
    .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
    .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);
  }
  
  constructor(){
  }
}
```

Credit Matt Balmer
npm package: @nomadreservations/hmr-plugin
Description: HMR plugin for NGXS. See [repo](https://github.com/ngxs/store) for more info.
Latest version: 3.5.1-dev.master-60cff67

# @ngxs/hmr-plugin

HMR plugin for NGXS. See [repo](https://github.com/ngxs/store) for more info.
npm package: @nomadreservations/litepicker
Description: Date range picker - lightweight, no dependencies
Author: Rinat G.
Latest version: 1.5.7-luxon.1

[![npm version](https://badge.fury.io/js/litepicker.svg)](https://www.npmjs.com/package/litepicker) [![Build Status](https://travis-ci.org/wakirin/Litepicker.svg?branch=master)](https://travis-ci.org/wakirin/Litepicker) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/wakirin/Litepicker/blob/master/README.md)

Litepicker
=========

Date range picker - lightweight, no dependencies

## Features
* No dependencies
* Single date or date range
* Show multiple months
* Min/Max days for select and/or Min/Max dates for select
* Select forward/backward
* Inline mode
* Repick date range
* Lock/Booked days  
  
See more details in docs.

## [Demo & Docs](https://wakirin.github.io/Litepicker)

## Compatibility
* IE 11 (polyfill required, [docs](https://wakirin.github.io/Litepicker/#anchor-IE11))
* Edge 17+
* Chrome 60+
* Firefox 52+
* Safari 11+
* Opera 48+

## Roadmap
* Time picker
* ...

## Additional modules
* [litepicker-module-ranges](https://github.com/wakirin/litepicker-module-ranges) - adds predefined ranges. [demo](https://jsfiddle.net/waki/td0uapeo/)
* [litepicker-module-navkeyboard](https://github.com/wakirin/litepicker-module-navkeyboard) - adds keyboard navigation. [demo](https://jsfiddle.net/waki/3b5uwj1z/)

## See also:
* [Drupal module](https://www.drupal.org/project/date_range_picker) by [kviolka](https://github.com/kviolka)
* [Wordpress Ninja forms](https://github.com/soderlind/date-range-ninja-forms) by [soderlind](https://github.com/soderlind)

## Supporting Litepicker
[![](docs/images/coffee.png)](https://ko-fi.com/wakirin)

## Tested on real browsers
Tested on real browsers via BrowserStack.  
Thanks to the BrowserStack for supporting the open-source projects.  

[![](docs/images/Browserstack-logo.png)](https://www.browserstack.com/)