open-index/open-npm huggingface dataset:
npm package: @squiz/chat-ui
Description: ## Overview This package provides an out of the box React Chat UI component to integrate with the Squiz DXP Chat AI capability.
Latest version: 1.10.1

# ChatUI

## Overview
This package provides an out of the box React Chat UI component to integrate with the Squiz DXP Chat AI capability. 

### Styling
Out of the box this component includes classes, using the BEM class naming method, but does not load styles automatically. 
An example set of styling is provided in this packages lib directory.

### Usage Example
When running in Squiz Matrix or another system where __dxp is routed correctly to the Squiz DXP 
```
import { ChatUI } from '@squiz/chat-ui';

export function Chat = ()=>{
    return <ChatUI ai="CHAT_AI_SQUIZ_DXP_CONSOLE_HERE" greeting="Help can i help?" />
}
```

When running from a system without automatic routing via the origins /__dxp path a full path to the @squiz/ai-service needs to be provided:

```
import { ChatUI } from '@squiz/chat-ui';

export function Chat = ()=>{
    return (
        <ChatUI 
            ai="CHAT_AI_SQUIZ_DXP_CONSOLE_HERE"
            aiApiUrl="https://my-domain/__myRoute/to/the/dxp/service/ai" 
            greeting="Help can i help?" 
        />
    )
}
```

If you have a pre-existing DxpAiService from the @squiz/dxp-ai-client package you can pass this in instead of a aiApiUrl:

```
import { ChatUI } from '@squiz/chat-ui';
import { DxpAiService } from '@squiz/dxp-ai-client';

export function Chat = ({dxpAiService}: {dxpAiService: DxpAiService<unknown>})=>{
    return (
        <ChatUI 
            ai="CHAT_AI_SQUIZ_DXP_CONSOLE_HERE"
            aiService={dxpAiService} 
            greeting="Help can i help?" 
        />
    )
}
```
npm package: @squiz/dam-resource-browser-plugin
Description: > TODO: description
Latest version: 3.4.2

# `@squiz/dam-resource-browser-plugin`

> TODO: description

## Usage

```
const damResourceBrowserPlugin = require('@squiz/dam-resource-browser-plugin');

// TODO: DEMONSTRATE API
```

## Authentication

Set BYNDER_TOKEN in local storage using permanent bynder token from 1password
npm package: @squiz/formatted-text-editor
Description: This repo contains the necessary code to develop and publish an NPM package for creating formatted text editors for use in Squiz products.
Latest version: 2.6.7

# DXP Formatted text editor component

This repo contains the necessary code to develop and publish an NPM package for creating formatted text editors for use in Squiz products.

The formatted text editor is using the [Remirror](https://remirror.io/) React library.

### Requirements

- [Volta](https://volta.sh/)
- [Node/NPM](https://nodejs.org/en/)

### Working locally

Provided you have `Volta` installed as soon as you are in the `formatted-text-editor` directory you should be on the correct Node version.
See the `package.json` for the specific version.

Now run the following commands from the `packages/formatted-text-editor/` directory.

```sh
npm i
```

```sh
npm run dev
```
This will expose `http://localhost:5173/` and this can be viewed in the browser.

> TIP: Make sure you have already installed the node modules at the root level of the repo.

## WIP: Contributing

## Testing

Tests must be written when contributing to this package. Tests are automatically run in CI and test failure will result in unmerged code.

### Unit testing

This package using Jest to perform Unit testing. In addition to Jest we are using a few Testing Library utilities:

- [React testing library](https://testing-library.com/docs/react-testing-library/intro/) - Enables React component testing
- [Jest DOM](https://testing-library.com/docs/ecosystem-jest-dom/) - Enables custom matchers

Tests should be co-located with componentry and should strive for maximum coverage.

To run tests locally you can run:
```sh
npm run test
```
Or if you'd like to "watch" for changes:
```sh
npm run test:watch
```

When testing text input in the text editor, it is recommended to use the `<MockEditor />` component, which is a simple wrapper around the Remirror component that provides additional functionality for testing (supplying text into the editor).

### Test coverage

Test coverage is enforced globally in this package. You can run the test coverage script from the package root:

```sh
npm run test:coverage
```

Coverage will also run as part of the normal test script. Please see ./jest.config.ts for the currently configured thresholds.

### End to end testing

This package uses [Cypress](https://docs.cypress.io/) for end to end testing.

To run tests locally you can run:
```sh
npm run test:e2e
```
Cypress is configured to look at a preview dev environment on `http://localhost:8080`.
npm package: @squiz/generic-browser-lib
Description: Package with reusable components used by resource/component browsers
Latest version: 1.67.5

# `@squiz/generic-browser-lib`

> Package contains atomic elements used within Resource browser and Component browser components.

## Usage

```
import { PreviewPanelHOC, PreviewPanelProps } from '@squiz/generic-browser-lib';

```
npm package: @squiz/local-component-dev-ui
Description: Local component development UI for the Squiz DXP CLI.
Latest version: 0.6.21

# Local Component Dev UI

Local component development UI for the Squiz DXP CLI.

## Usage

Run as part of the `dxp-next` command with `dxp-next cmp dev-ui path/to/components`

### Running on a different port

Passing `--port` will run the UI on a specific port: `dxp-next cmp dev-ui path/to/components --port 3333`
npm package: @squiz/resource-browser
Description: The Resource Browser is a generic frontend intended for use across the Squiz DXP when a end user needs to browse for and select a resource via a React frontend UI. It is intended to allow rendering of various compatible sources and to move from one source
Latest version: 3.3.11

# Resource Browser

The Resource Browser is a generic frontend intended for use across the Squiz DXP when a end user needs to browse for and select a resource via a React frontend UI. It is intended to allow rendering of various compatible sources and to move from one source to another seamlessly. It is not intended to provide an actual UI for any specific datasource; these must be provided via the plugin framework.

## Plugins

The Resource Browser does not know how to interface with any source systems; this support needs to be plugged into it. A plugin interface has been defined to allow any source system to be added into the Resource Browser as needed with as complex a UI as that source needs. These plugin can be defined inline when simple (e.g testing) or published to NPM as a packages and consumed by a specific application.

An example plugin with comments as documentation can be found [here](./src/__mocks__/PluginExample.tsx).

## Exports

This library exports both CommonJS and ESM code. It is recommended that you use the CommonJS when possible (when you aren't restricted by other tooling) as the testing framework we use (JEST) runs via this compilation method.
npm package: @squiz/resource-browser-ui-lib
Description: > TODO: description
Latest version: 1.2.6

# `@squiz/resource-browser-ui-lib`

> TODO: description

## Usage

```
const resourceBrowserUiLib = require('@squiz/resource-browser-ui-lib');

// TODO: DEMONSTRATE API
```

## Exports

This library exports both CommonJS and ESM code. It is recommended that you use the CommonJS when possible (when you aren't restricted by other tooling) as the testing framework we use (JEST) runs via this compilation method.