# Cortex React Plugin UI Components

This package enables Cortex plugin developers to create plugins that share the look and feel of Cortex as a plugin
iframe guest.

# Terminology

- "Plugin Host": The client-side Cortex web application that creates the iframe. The host iframe element loads your
  plugin.
- "Plugin Guest": Your compiled plugin application, running within the context of the host. This is the bundled HTML/JS file you will upload to Cortex.

# How it works

Once your guest plugin loads, Cortex host will sent a message to your plugin via
[window.postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). We provide utilities for this
within [@cortexapps/plugin-core](https://www.npmjs.com/package/@cortexapps/plugin-core). The messages will update with
context information on when the host theme changes (dark/light mode) and provide essential CSS variables to your plugin.

# Setup

Essential to your plugin is including base styles from this package. Most bundlers will allow you to do this via import:

```
import "@cortexapps/react-plugin-ui/index.css";
```

If this option is not available to you, consult your bundler documentation.

The imported CSS will apply some global styling for fonts and base colors, and provide necessary classes for the component
library.

# Components

Full documentation is not available for our React components yet. In the meantime, please reference [cookiecutter-beta](https://github.com/cortexapps/cookiecutter-cortex-plugin/blob/master/%7B%7Bcookiecutter.project_name%7D%7D/README.md) for example
implementations of each component. Additionally, these components are fully typed with Typescript.

These components' APIs heavily draw from/are built on top of Radix/shadcn. For a primer on how these components generally work,
check out these docs:

- [https://www.radix-ui.com/primitives/docs/overview/introduction](https://www.radix-ui.com/primitives/docs/overview/introduction)
- [https://ui.shadcn.com/docs](https://ui.shadcn.com/docs)

Each component may have a family of components. See example implementations in [cookiecutter-beta](https://github.com/cortexapps/cookiecutter-cortex-plugin/blob/master/%7B%7Bcookiecutter.project_name%7D%7D/README.md). The components available are as listed:

- Badge
- Button
- Breadcrumb
- Card
- Checkbox
- Dialog
- Input
- Label
- Loader
- Progress
- Select
- Tabs
- Typeahead