<h3 align="center">
  Note Fields for Sanity
</h3>
<p align="center">
  <strong>Display inline notes within your schemas</strong><br />
✨ uses Sanity UI ✨ multiple styles ✨ dark mode compatible ✨
</p>

![note-field-v3](https://user-images.githubusercontent.com/737188/219781860-0e43a189-3fce-48e6-8440-f70908deba54.png)

<br />

## 🔌 Install

```sh
yarn add sanity-plugin-note-field
# or npm
npm i sanity-plugin-note-field
```

> **Compatibility** <br />This release targets **Sanity Studio v5** and **React 19**.
> For the legacy Studio v2 plugin, refer to the [studio-v2 branch](https://github.com/ndimatteo/sanity-plugin-note-field/tree/studio-v2).

### Requirements

- `sanity`: `^5`
- `react`: `^19`
- `node`: `>=18`

<br />

## ⚙️ Configure

```ts
// `sanity.config.ts` / `sanity.config.js`:
import { defineConfig } from 'sanity'
import { noteField } from 'sanity-plugin-note-field'

export default defineConfig({
  // ...
  plugins: [
    // ...
    noteField(),
  ],
})
```

<br />

## 🗒️ Usage

```js
defineField({
  title: 'Important!',
  description: 'a custom Message...',
  name: 'myCustomNote',
  type: 'note',
  options: {
    icon: () => <Warning size={20} weight="duotone" />,
    tone: 'caution',
  },
})
```

### Properties

| Name          | Type                     | Description                                                                 |
| ------------- | ------------------------ | --------------------------------------------------------------------------- |
| `type`        | string                   | **(Required)** Value must be set to `note`.                                 |
| `name`        | string                   | **(Required)** The field name. This will be the key in the data record.     |
| `title`       | string                   | **(Optional)** Short title, appears in bold above the optional description. |
| `description` | string / React.Component | **(Optional)** Long form message, displayed under the title.                |

### Options

| Name   | Type            | Description                                                                                                                                                                    |
| ------ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `icon` | React.Component | **(Optional)** Display an icon alongside your note's title/message. <br />_Just remember that any schema file with icons in them should have a .jsx or .tsx extension._        |
| `tone` | string          | **(Optional)** The color of the note. <br />_Accepts any of the [Sanity UI Card](https://www.sanity.io/ui/docs/primitive/card#properties) tone values. Defaults to `primary`._ |

<br />

## 🧪 Develop & test

This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
with default configuration for build & watch scripts.

See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
on how to run this plugin with hotreload in the studio.

<br />

## 🤝 License

### MIT

> [nickdimatteo.com](https://nickdimatteo.com) &nbsp;&middot;&nbsp;
> Github [@ndimatteo](https://github.com/ndimatteo) &nbsp;&middot;&nbsp;
> Instagram [@ndimatteo](https://instagram.com/ndimatteo)