# @nrk/sanity-plugin-nrkno-odd-utils

> _This lib expands on the [principles of nrkno-sanity](https://github.com/nrkno/nrkno-sanity-libs/blob/master/docs/nrkno-sanity-principles.md)._

Latest version **1.0.17** (published 2022-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nrk/sanity-plugin-nrkno-odd-utils
pnpm add @nrk/sanity-plugin-nrkno-odd-utils
yarn add @nrk/sanity-plugin-nrkno-odd-utils
bun add @nrk/sanity-plugin-nrkno-odd-utils
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.17 |
| Published | 2022-10-25 |
| First published | 2022-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 52 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Maintainers | mikkelnygard, feiring, dervodev, grimbur, gardkroyer, kariaan, edplayz, elias-chairi, miatollaksvik, ytterbo, glennwedin, machineboycom, trulsl, syndrol, henit, mslhm, cbjerkan, hermangudesen, andreeldareide, henningkoller, oleob, meisen, espenhalstensen, hakonknutzen2, danjohnrk, olapeter, teodor-elstad, michaelpande, lysebraate, lorecaster, wwalmnes, nrk-ps-teamcity, vincent.andersson, swla, nrk-midas-jenkins, andorpandor, jarlelin, nrkrichard, gesi, gundelsby-nrk, jonstalecarlsen, vagifabilov, nrk-sofie-ci, nytamin, jesperstarkar, loftum, emte123, skjalgepalg, eirikhalvard, astokke, n640071, n07073, henrik-mattsson, eirikbacker, haavardm, yr, nrk-kurator-jenkins, toshb, torgeilo, nrk-user-sync, dhdeploy, janerikbr, espenwa, rogerhmar, ovstetun, eivind, stianlj, haraldkj, mariusu, spesialsnorre, cristobal, knuthaug, thohalv, johnarne, eshaswini, morrow, oyvindeh, laat, toggu, nrk-jenkins, plomma, evjand, moltubakk, ingridguren, lu-lux, andersli, silje, stiandg, sjurlur, anderscan, andipodnrk, pkej, yosrimti, zenangst, morten.nyhaug, ingvildcath, erlend.jones, brneirik, mollerse, eriksalhus, frdrks, tbnrk, nordanke, balte, mikaelrss, simonmitternacht, christiankarlsson9, martintorgersen, rebchr, steipal, discobus, ingvesund, martingundersen, tinkajts, hallvardlid, tomivar, ajaco, tobinus, mortenok, nrk-ark-deploy, jeangilbertlouis, heidimork, ingriddraagen, fridajalborg, bruusi, rosvoll, christianeide, enordby, artzag, glen_imrie, mia.aasbakken, elathamna, evjjan17, olatoft, kongsrud, chrpeter, ingvildforseth, esseb, talepre, haraldk76, stigok, dagfinno, johannesodland, anders993, vildefj, vildepk, andreakn, rolerboler, meloygutt, anders.baggethun |
| Keywords | sanity, sanity-plugin |

## Links

- npm: https://www.npmjs.com/package/@nrk/sanity-plugin-nrkno-odd-utils
- Repository: https://github.com/nrkno/nrkno-sanity-libs
- Homepage: https://github.com/nrkno/nrkno-sanity-libs#readme
- Issues: https://github.com/nrkno/nrkno-sanity-libs/issues
- npm.io page: https://npm.io/package/@nrk/sanity-plugin-nrkno-odd-utils

## Recent versions

- 1.0.17 (latest) — 2022-10-25
- 1.0.16 — 2022-10-18
- 1.0.15 — 2022-10-04
- 1.0.14 — 2022-09-22
- 1.0.13 — 2022-09-12
- 1.0.12 — 2022-08-30
- 1.0.11 — 2022-06-14
- 1.0.10 — 2022-05-24
- 1.0.9 — 2022-05-04
- 1.0.8 — 2022-04-21
- 1.0.7 — 2022-01-28
- 1.0.6 — 2022-01-20
- 1.0.5 — 2022-01-20
- 1.0.4 — 2022-01-18
- 1.0.3 — 2022-01-12
- … 2 more at https://npm.io/package/@nrk/sanity-plugin-nrkno-odd-utils/versions

## README

# @nrk/sanity-plugin-nrkno-odd-utils

_This lib expands on the [principles of nrkno-sanity](https://github.com/nrkno/nrkno-sanity-libs/blob/master/docs/nrkno-sanity-principles.md)._

nrkno-odd-utils (odd = option driven design) contains a handful of utility functions and classes for working with
[Sanity custom components](https://www.sanity.io/docs/custom-input-widgets).

See docs about [option driven design](docs/option-driven-design.md) for more.

# Installation

## Yarn

`yarn add @nrk/sanity-plugin-nrkno-odd-utils`

## npm

`npm install --save @nrk/sanity-plugin-nrkno-odd-utils`


# Usage

Easily decorate and reuse built-in Sanity inputs by delegating to NestedFormBuilder.
It is imperative that we unset the inputComponent in the type (or unset the option used by input-resolver.ts).

Functions available as module imports:

```ts
import {
    unsetOption, 
    unsetInputComponent,
    useUnsetOption, 
    useUnsetInputComponent, 
    NestedFormBuilder
} from '@nrk/sanity-plugin-nrkno-odd-utils'
```


## Example - inputComponent

Given a schema with an input component: 
```ts
const schemaOrField = {
  name: 'schemaOrField',
  inputComponent: CustomComponent,
}
```

We can decorate a custom heading over a standard sanity input (regardless of type), like so:

```tsx
// CustomComponent.tsx
import React, {forwardRef, Ref} from 'react';
import {useUnsetInputComponent, NestedFormBuilder} from '@nrk/sanity-plugin-nrkno-odd-utils';

export const CustomComponent = forwardRef(function CustomComponent(props, ref) {
    // IMPORTANT: leaving out will cause the browser to lock up in an infinite loop
    const type = useUnsetInputComponent(props.type);
    return <div>
        <h4>A custom heading</h4>
        <NestedFormBuilder {...props} ref={ref} type={type}/>
    </div>;
});
```

## Example - option

Given a schema with an option, and an input-resolver.js file defined in sanity.json:
```ts
// schema-file.js
const schemaOrField = {
  name: 'schemaOrField',
  option: {
      custom: true
  }
}

// input-resolver.js
function resolveInput(schema) {
    if(schema.options?.custom) {
        return CustomComponent
    }
}
```
We can decorate a custom heading over a standard sanity input (regardless of type), like so:

```tsx
// CustomComponent.tsx
import React, {forwardRef, Ref} from 'react';
import {useUnsetOption, NestedFormBuilder} from '@nrk/sanity-plugin-nrkno-odd-utils';

export const CustomComponent = forwardRef(function CustomComponent(props, ref) {
    // IMPORTANT: leaving out will cause the browser to lock up in an infinite loop
    const type = useUnsetOption(props.type, 'custom');
    return <div>
        <h4>A custom heading</h4>
        <NestedFormBuilder {...props} ref={ref} type={type}/>
    </div>;
});
```

### Unit testing components using NestedFormBuilder

NestedFormBuilder extends FormBuilderInput. FormBuilderInput is a Sanity component that uses
 non-standard import syntax that does not play well with Jest (`import x from 'part:xyz'`).

See [NestedFormBuilder.test.ts](src/lib/NestedFormBuilder.test.tsx) for examples on how to mock FormBuilderInput,
and check which props passed to FormBuilderInput during render. 

This is useful when unit-testing that props.type was modified correctly for instance. 

# Develop

This plugin is built with [sanipack](https://www.npmjs.com/package/sanipack).


## Test the build

Inside this directory run
```bash
npm run build 
yarn link
```

Then
```bash
cd /path/to/sanity-studio
yarn link @nrk/sanity-plugin-nrkno-odd-utils
```

The change to yarn is intentional , since that is what Sanity Studio uses.

---
_Source: https://npm.io/package/@nrk/sanity-plugin-nrkno-odd-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._