open-index/open-npm huggingface dataset:
npm package: @oak-digital/editorjs-button
Description: Button to set link and text for Editor.js
Author: kaaaaaaaaaaai
Latest version: 1.0.5

![](https://badgen.net/badge/Editor.js/v2.22.3/blue)

# Set Link and Text and Generate button plugin for Editor.js

![画面収録 2020-12-13 16 59 53](https://user-images.githubusercontent.com/2194021/102006852-7a6fb880-3d67-11eb-98d2-20b7e88672df.gif)

## Installation

### Install via NPM

Get the package

```shell
npm i --save editorjs-button
```

Include module at your application

```javascript
const anyButton = require('anyButton');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN

`https://cdn.jsdelivr.net/npm/editorjs-button@1.0.4`

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
tools: {
        AnyButton: {
          class: AnyButton,
          inlineToolbar: false,
          config:{
            css:{
              "btnColor": "btn--gray",
            }
          }
        },
      },
      i18n: {
        messages: {
          tools: {
            "AnyButton": {
              'Button Text': 'ボタンに表示するテキスト',
              'Link Url': 'ボタンの飛び先のURL',
              'Set': "設定する",
              'Default Button': "デフォルト",
            }
          }
        },
      },
}
```

## Config Params

`i18n` overwrite if want to change default placeholder text,

```
i18n: {
    messages: {
      tools: {s
        "AnyButton": {
          'Button Text': 'ボタンに表示するテキスト',
          'Link Url': 'ボタンの飛び先のURL',
          'Set': "設定する",
          'Default Button': "デフォルト",
        }
      }
    },
},
```

if customize css, input filed, button design, and etc... 

```
config:{
    css:{
      "btnColor": "btn--gray",
    }
}
```

## Output data

| Field  | Type     | Description      |
| ------ | -------- | ---------------- |
| link   | `string` | Exclusion HTML Tag text |
| text   | `string` | Exclusion HTML Tag text |


```json
{
            "type" : "AnyButton",
            "data" : {
                "link" : "https://editorjs.io/",
                "text" : "editorjs official"
            }
        }
```
npm package: @oak-digital/medusa-plugin-builder
Description: **NOTE: Only for medusa v2/preview**
Latest version: 0.1.0

# Medusa "plugin" builder

**NOTE: Only for medusa v2/preview**

This repository consists of helpers and modules to synchronize products from medusa to [builder.io](https://builder.io).
Since medusa v2 does not support plugins yet, you will have to use the helpers.

## Installation

Install this package in your medusa project

```
npm install @oak-digital/medusa-plugin-builder zod
# or
yarn add @oak-digital/medusa-plugin-builder zod
# or
pnpm install @oak-digital/medusa-plugin-builder zod
```

## Usage

### Configure module

In `medusa-config.js` add the module

```js
// medusa-config.js

module.exports = defineConfig({
  modules: {
    // Your other modules ...
    builderModuleService: {
      resolve: '@oak-digital/medusa-plugin-builder/dist/modules/builder/index.js',
      /** @type {import('@oak-digital/medusa-plugin-builder').BuilderModuleOptions} */
      options: {
        apiKey: process.env.BUILDER_API_KEY,
        models: {
          // ...
        },
      },
    },
  },
});
```

#### `Models` option

For each model that you want synchronized, you should add the model for it in the `models` option. The purpose of this option is to get validate api responses and for you to transform a medusa product into the shape of your builder product.

```js
product: {
    modelName: 'product', // The model name in builder
    fields: z.object({
        // these are the fields that your builder product has
        medusaId: z.string().nullish(),
        name: z.string().nullish(),
        productDescription: z.string().nullish(),
    }),
    // This function should transform a medusa product to a builder product
    transform: (product) => ({
        medusaId: product.id,
        name: product.title,
        productDescription: product.description,
    }),
}
```

**NOTE: The validation uses zod, so be sure to import `z` from zod at the top of the file**


### Setting up subscribers

It is not enough to just configure the module as the module cannot create subscribers. Thus you must create each subscriber in your project.

```ts
// src/subscribers/product-to-builder.ts
export { default, config } from '@oak-digital/medusa-plugin-builder/dist/subscribers/product/index';
```

### Custom subscribers

If you do not want to use the provided subscribers, you can trigger the workflows yourself

TODO:

### Admin widgets

You should also set up each admin widget

TODO:
npm package: @oak-digital/nextjs-curtain
Description: A nextjs wrapper for [`@oak-digital/react-curtain`](https://github.com/oak-Digital/react-curtain) which triggers on page changes.
Latest version: 2.0.0

# Nextjs curtain

A nextjs wrapper for [`@oak-digital/react-curtain`](https://github.com/oak-Digital/react-curtain) which triggers on page changes.

## Installation

`react-curtain` depends on framer-motion as a peer dependency so it is important that you install that for your project as well

```
pnpm install @oak-digital/nextjs-curtain @oak-digital/react-curtain framer-motion
```

## Usage

### Pages router

In your `pages/_app.tsx` file, wrap your components in the `<NextjsCurtain>` component. Don't forget to give the curtain a background color or it will be invisible

```ts
// pages/_app.tsx
import { NextjsCurtain } from '@oak-digital/nextjs-curtain';
import '@oak-digital/react-curtain/dist/style.css'
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
    return (
        <NextjsCurtain curtainClassName="bg-dark">
            <Component {...pageProps} />
        </NextjsCurtain>
    );
}
```

### App router

TODO
npm package: @oak-digital/nextjs-strapi-plugin-seo
Description: This library provides Nextjs [`<Head>`](https://nextjs.org/docs/api-reference/next/head) components for [`strapi-plugin-seo`](https://github.com/strapi/strapi-plugin-seo). This makes it easy to utilize `strapi-plugin-seo` without much to do in your fronte
Latest version: 0.1.2

# Nextjs components for strapi-plugin-seo

This library provides Nextjs [`<Head>`](https://nextjs.org/docs/api-reference/next/head) components for [`strapi-plugin-seo`](https://github.com/strapi/strapi-plugin-seo).
This makes it easy to utilize `strapi-plugin-seo` without much to do in your frontend application.

## Getting started

### Installation

Install the library

```bash
# pnpm
pnpm install @oak-digital/nextjs-strapi-plugin-seo
# npm
npm install @oak-digital/nextjs-strapi-plugin-seo
# yarn
yarn add @oak-digital/nextjs-strapi-plugin-seo
```

### Usage - App router

In a `page.tsx` file you should use `generateMetadata` where you fetch the entry from strapi with the seo field populated. And then you can create the metadata with the `getMetadataFromSeo` function.

```tsx
import { getMetadataFromSeo } from '@oak-digital/nextjs-strapi-plugin-seo';

export const generateMetadata = (props) => {
    // This should be your fetcher
    const page = await fetchPageWithSeo();

    const seoMetadata = getMetadataFromSeo({ seo: page.attributes.seo });

    return {
        ...seoMetadata,
        // Here you can add any other fields that you may want on the meta data
    };
};
```

### Usage - Pages router

On your page that fetches the seo component you can simply import the `Seo` component and pass the data.
NOTE: It should not be wrapped in a [`next/head`](https://nextjs.org/docs/api-reference/next/head) component, this is done internally.

```tsx
import { Seo, SeoProps } from '@oak-digital/nextjs-strapi-plugin-seo';

type Props = {
    seo: SeoProps['seo'];
    pageProps: any;
};

const MyPage: NextPage<Props> = ({ seo }) => {
    return (
        <main>
            <Seo seo={seo} strapiUrl={'https://your-strapi-url.example:1337'} />
        </main>
    );
};
```

### Fetching

When fetching you may also want to populate the fields for seo, for this there is added a helper array with the fields that needs to be populated (`seoDeepPopulateFields `).
This can easily be used with [`qs`](https://github.com/ljharb/qs) or some other strapi client.

#### Example with `qs`

This example assumes that your seo component's name is seo from the content type, edit the populate seo to the one that you use.

```typescript
const query = qs.stringify({
    populate: {
        seo: {
            populate: seoDeepPopulateFields,
        },
    },
});
```

## Testing locally

For testing purposes, there has been added an [`/example`](./example/) directory, where a strapi instance can be started and nextjs to make sure all the seo fields are correctly added.

[Read more](./example/README.md)

## Publishing

Publishing will happen automatically with github actions.
Just run `pnpm run release`
npm package: @oak-digital/react-curtain
Description: React curtain can be used as a page transition, by hiding all your content behind a curtain and then switching out the components. React curtain will not switch out it's children while transitioning, thus reducing complexity in your application.
Latest version: 0.4.0

# react-curtain

React curtain can be used as a page transition, by hiding all your content behind a curtain and then switching out the components.
React curtain will not switch out it's children while transitioning, thus reducing complexity in your application.

## Getting started

```
# pnpm, npm or yarn
pnpm install @oak-digital/react-curtain framer-motion
```

In your component, import the `Curtain` component and the css. Make sure to import this library's css before your own so that you may overwrite the styles.

```tsx
import { Curtain } from '@oak-digital/react-curtain'
import '@oak-digital/react-curtain/dist/style.css'

const Layout = ({ children, isLoading }) => {
    return (
        <Curtain visible={isLoading}>
            {children}
        </Curtain>
    )
}

export default Layout
```

## API

See [storybook](https://oak-digital.github.io/react-curtain/) for description of props

## Note about context

If a context changes, `react-curtain` will render the updated context immediatly. To avoid this, you should provide a "fake" context, that `react-curtain` will make sure only lives while animating the curtain.

To make `react-curtain` use a "fake" context, you should use the `contexts` prop ([example](./src/stories/CurtainContext/index.tsx)) and provide the contexts.

The following example shows how the context can be updated at the same time as the curtain should be visible, but it will still show the old state of the context, since the context was provided in the `contexts` prop.

```tsx
import { Curtain } from '@oak-digital/react-curtain'
import '@oak-digital/react-curtain/dist/style.css'

// This should either be defined outside of render function
// or as a useMemo to avoid unnecessary reruns of useEffect.
const contexts = [MyContext];

const Layout = () => {
    const { counter, incrementCounter } = useMyContext(); // This is just to show what the context provides
    const [visible, setVisible] = useState(false);

    const onClick = async () => {
        incrementCounter();
        setVisible(true);

        // wait 1000ms before hiding the curtain again
        await new Promise((resolve) => setTimeout(resolve, 1000));

        setVisible(false);
    };

    return (
        <Curtain contexts={contexts} visible={visible}>
            <div>
                {/* Button that renders counter from context */}
                <Button onClick={onClick} />
            </div>
        </Curtain>
    );
}
```
npm package: @oak-digital/react-peek-a-header
Description: This library provides a context and components for using [@oak-digital/peek-a-header](https://github.com/Oak-Digital/peek-a-header).
Latest version: 0.1.0

# React wrapper for Peek a header

This library provides a context and components for using [@oak-digital/peek-a-header](https://github.com/Oak-Digital/peek-a-header).

It provides a hiding header which hides and shows as the user scrolls. It is configurable so you can use your own animations based on the events fired by `peek-a-header`.

## Getting started

### Installation

Install with your package manager, you also need the `@oak-digital/peek-a-header` dependency

```bash
$ npm i @oak-digital/react-peek-a-header @oak-digital/peek-a-header
$ pnpm i @oak-digital/react-peek-a-header @oak-digital/peek-a-header
$ yarn add @oak-digital/react-peek-a-header @oak-digital/peek-a-header
```

## Usage

### Quickstart example

```tsx
import { PeekAHeaderComponent } from '@oak-digital/react-peek-a-header'

const MyHeader = () => {
    return (
        <PeekAHeaderComponent>
            Here is my header
        </PeekAHeaderComponent>
    )
}

export default MyHeader
```

This header is very simple and will hide and show when the user scrolls

### Props

You can pass the same props to this as an `HTMLElement` and the same props as in `PeekAHeaderOptions`.

Please check [`peek-a-header` docs](https://github.com/Oak-Digital/peek-a-header) for more information.

#### `events` props

You should use the `events` props to listen for events, it is just an event map.

Example:

```typescript
<PeekAHeaderComponent events={{
    progress: (progress) => {
        // Do something with progress
    },
}}>
    ...
</PeekAHeaderComponent>
```

#### `tag` prop

You may not always want to use a `<header>` element for the hiding header. maybe because it is already wrapped in a `<header>` tag.

You can easily change it by using the `tag` prop, just pass a string of which tag you would like.

example:

```typescript
<PeekAHeaderComponent tag="div">
    ...
</PeekAHeaderComponent>
```
npm package: @oak-digital/resights-js
Description: A Typescript/Javascript library for the Resights API
Author: Oak Digital
Latest version: 0.0.1-beta.2

# Resights-js

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]

A Typescript/Javascript library for the [Resights API](https://api.resights.dk)

## Install

```bash
pnpm install @oak-digital/resights-js
```

## Usage

To use this library you need to [obtain a resights API token](https://api.resights.dk/docs#/%F0%9F%94%91%20Token/token). In this example you need to replace the `RESIGHTS_API_TOKEN` with your actual token.

```ts
import { Resights } from '@oak-digital/resights-js'

const client = new Resights(RESIGHTS_API_TOKEN)
```

## Docs

You can find online docs through [tsdocs.dev](https://tsdocs.dev/search/docs/@oak-digital/resights-js) or [jsdocs.io](https://www.jsdocs.io/package/@oak-digital/resights-js)

## License

[MIT](./LICENSE) License © 2023-PRESENT [Anthony Fu](https://github.com/antfu)

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@oak-digital/resights-js?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/@oak-digital/resights-js
[npm-downloads-src]: https://img.shields.io/npm/dm/@oak-digital/resights-js?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/@oak-digital/resights-js
[bundle-src]: https://img.shields.io/bundlephobia/minzip/@oak-digital/resights-js?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/package/@oak-digital/resights-js
[license-src]: https://img.shields.io/github/license/Oak-Digital/resights-js.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/Oak-Digital/resights-js/blob/main/LICENSE
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
[jsdocs-href]: https://www.jsdocs.io/package/@oak-digital/resights-js
npm package: @oak-digital/strapi-plugin-cision-id-getter
Description: This is the description of the plugin.
Author: A Strapi developer
Latest version: 0.2.1

# Strapi plugin cision-id-getter

This plugin provides a custom field for getting the `EncryptedId` field of a release on cision based on the url.

The idea is to just save the id in a field on a content type and then some custom logic can be written to fetch the entire release either in strapi or the frontend.


## Custom field options

The custom field has a single option for the newsfeed id.
The newsfeed id is necessary, because the custom field can then fetch all releases in that newsfeed and find the one that has the same url as provided.
The newsfeed id is the one in the end of the newsfeed api url `https://publish.ne.cision.com/papi/NewsFeed/<ID>`

## Getting started

Install the plugin with your package manager

```bash
npm install @oak-digital/cision-id-getter
```

## Configuration

This plugin currently has no configuration options

## Contribution

If you find any bugs or have feature request, you are welcome to open an issue or a pull request.

## Publishing

```
npm version # patch | minor | major
npm run build
npm publish
```
npm package: @oak-digital/strapi-plugin-populate-deep
Description: This is the description of the plugin.
Author: Christofer Jungberg
Latest version: 2.0.6

# Strapi plugin populate-deep
This plugin allows for easier population of deep content structures using the rest API.

# Installation

`npm install strapi-plugin-populate-deep`

`yarn add strapi-plugin-populate-deep`


# Usages

## Examples

Populate a request with the default max depth.

`/api/articles?populate=deep`

Populate a request with the a custom depth

`/api/articles?populate=deep,10`

Populate a request with the a custom depth

`/api/articles/1?populate=deep,10`

## Good to know

The default max depth is 5 levels deep.

The populate deep option is available for all collections and single types using the findOne and findMany methods.

# Configuration

The default depth can be customized via the plugin config. To do so create or edit you plugins.js file.

## Example configuration

`config/plugins.js`

```
module.exports = ({ env }) => ({
  'strapi-plugin-populate-deep': {
    config: {
      defaultDepth: 3, // Default is 5
    }
  },
});
```

# Contributions
The original idea for getting the populate structure was created by [tomnovotny7](https://github.com/tomnovotny7) and can be found in [this](https://github.com/strapi/strapi/issues/11836) github thread
npm package: @oak-digital/ts-array-length
Description: TypeScript utils for dealing with TypeScript arrays
Author: uhyo
Latest version: 0.1.7

# ts-array-length

TypeScript utilities for dealing with array length. Of course, type predicates inside.

Useful for codebase with `noUncheckedIndexedAccess` turned on.

## Installation

```
npm i -D ts-array-length
```

## API: functions

### `hasLength(arr, len)`

Returns `true` if `arr.length === len`.

#### Example

```ts
// const arr: string[]

if (hasLength(arr, 1)) {
  // arr: readonly [string]
  const str: string = arr[0];
}
```

### `hasMinLength(arr, len)`

Returns `true` if `arr.length >= len`.

#### Example

```ts
// const arr: string[]

if (hasMinLength(arr, 1)) {
  // arr: readonly [string, ...string[]]
  const str: string = arr[0];
}
```

### `isNonEmpty(arr)`

Returns `true` if `arr.length >= 1`.

#### Example

```ts
// const arr: string[]

if (isNonEmpty(arr)) {
  // arr: readonly [string, ...string[]]
  const str: string = arr[0];
}
```

## API: utility types

### `ReadonlyArrayExactLength<T, N>`

Tuple type whose element type is `T` and has exact length `N`.

```ts
// readonly [string, string, string]
type SSS = ReadonlyArrayExactLength<string, 3>;
```

### `ReadonlyArrayMinLength<T, N>`

Tuple type whose element type is `T` and has at least `N` elements.

```ts
// readonly [string, string, string, ...string[]]
type SSS = ReadonlyArrayMinLength<string, 3>;
```

## License

MIT
npm package: @oak-tree-house/vuepress-theme-vuetify-blog
Description: Vuetify VuePress Theme Suitable for Blog
Author: Sun Ziping
Latest version: 1.0.1

# vuepress-theme-vuetify-blog

See [vuepress-theme-vuetify-blog Documentation](https://szp15.com/2020/01/28/theme-vuetify-blog-doc/).
npm package: @oakbun/auth
Description: Better Auth integration plugin for the OakBun framework.
Author: René
Latest version: 1.0.0

# @oakbun/auth

[Better Auth](https://www.better-auth.com/) integration plugin for the OakBun framework.

## Installation

```bash
bun add @oakbun/auth better-auth
```

## Usage

```ts
import { createApp } from 'oakbun'
import { betterAuthPlugin } from '@oakbun/auth'
import { betterAuth } from 'better-auth'

const auth = betterAuth({
  database: { /* your db config */ },
  emailAndPassword: { enabled: true },
})

const app = createApp({ adapter: db })

app.use(betterAuthPlugin({ auth }))
```

## License

MIT
npm package: @oakbun/jwt
Description: JWT plugin for the OakBun framework.
Author: René
Latest version: 1.0.0

# @oakbun/jwt

JWT plugin for the OakBun framework. Uses [jose](https://github.com/panva/jose) under the hood.

## Installation

```bash
bun add @oakbun/jwt
```

## Usage

```ts
import { createApp } from 'oakbun'
import { jwtPlugin } from '@oakbun/jwt'

const app = createApp({ adapter: db })

app.use(jwtPlugin({
  secret: process.env.JWT_SECRET!,
  algorithm: 'HS256',
}))

// ctx.auth is now available in all route handlers
app.use(defineModule('profile')
  .get('/', async (ctx) => ctx.json(ctx.auth.payload))
)
```

## License

MIT
npm package: @oakbun/logger
Description: Structured logger plugin for the OakBun framework.
Author: René
Latest version: 1.0.0

# @oakbun/logger

Structured logger plugin for the OakBun framework. Pretty-prints in TTY, outputs JSON in production.

## Installation

```bash
bun add @oakbun/logger
```

## Usage

```ts
import { createApp } from 'oakbun'
import { loggerPlugin, createLogger } from '@oakbun/logger'

const app = createApp({ adapter: db })

app.use(loggerPlugin())

// Standalone logger
const log = createLogger({ scope: 'myapp', level: 'info' })
log.info('Server started', { port: 3000 })
log.error('Something failed', { err: 'details' })
```

## License

MIT
npm package: @oakbun/scalar
Description: Scalar API docs plugin for the OakBun framework.
Author: René
Latest version: 1.0.0

# @oakbun/scalar

[Scalar](https://scalar.com/) API documentation plugin for the OakBun framework. Serves an interactive OpenAPI UI from your route definitions.

## Installation

```bash
bun add @oakbun/scalar
```

## Usage

```ts
import { createApp } from 'oakbun'
import { scalarPlugin } from '@oakbun/scalar'

const app = createApp({ adapter: db })

// ... register your modules ...

scalarPlugin(app, {
  path:    '/docs',
  title:   'My API',
  version: '1.0.0',
})

app.listen({ port: 3000 })
// Visit http://localhost:3000/docs
```

## License

MIT
npm package: @oakbun/ws
Description: WebSocket plugin for the OakBun framework.
Author: René
Latest version: 1.0.0

# @oakbun/ws

WebSocket plugin for the OakBun framework. Uses Bun's native WebSocket support.

## Installation

```bash
bun add @oakbun/ws
```

## Usage

```ts
import { createApp, defineModule } from 'oakbun'
import { createWsAdapter } from '@oakbun/ws'
import '@oakbun/ws' // enables .ws() on defineModule()

const ws = createWsAdapter()
const app = createApp({ adapter: db })

app.registerWsAdapter(ws)

app.use(defineModule('chat')
  .ws('/ws', {
    open(ctx)          { ctx.ws.send('connected') },
    message(ctx, raw)  { ctx.ws.send(raw) },
    close(ctx)         { console.log('disconnected') },
  })
)

app.listen({ port: 3000 })
```

## License

MIT
npm package: @oakendigital/kg-default-cards
Description: ## Install
Author: Oaken Digital
Latest version: 1.0.0

# Koenig Default Cards

## Install

`npm install @tryghost/kg-default-cards --save`

or

`yarn add @tryghost/kg-default-cards`


## Usage


## Develop

This is a mono repository, managed with [lerna](https://lernajs.io/).

Follow the instructions for the top-level repo.
1. `git clone` this repo & `cd` into it as usual
2. Run `yarn` to install top-level dependencies.


## Run

- `yarn dev`


## Test

- `yarn lint` run just eslint
- `yarn test` run lint and tests




# Copyright & License

Copyright (c) 2013-2022 Ghost Foundation - Released under the [MIT license](LICENSE).
npm package: @oakfinch/commitlint-config
Description: Shared base commitlint config for @oakfinch projects
Author: Nate Volker
Latest version: 2.0.0

# commitlint-config
Shared base [commitlint](https://commitlint.js.org) config for @oakfinch projects

---

[![license](https://badgen.net/github/license/oakfinch/configs)](https://github.com/oakfinch/configs/blob/main/LICENSE)
[![latest release on npm](https://badgen.net/npm/v/@oakfinch/commitlint-config?icon=npm&label=)](https://npmjs.com/package/@oakfinch/commitlint-config)
[![latest release on github](https://badgen.net/github/release/oakfinch/commitlint-config?icon=github&label=)](https://github.com/oakfinch/commitlint-config/releases/latest)

---

[![github](https://badgen.net/badge/icon/github?icon=github&scale=2&label=)](https://github.com/oakfinch/commitlint-config/)

---

## Installation

Using `npm`:

```
npm install -D @oakfinch/commitlint-config
```

Using `yarn`:

```
yarn add -D @oakfinch/commitlint-config
```

## Usage

`.commitlint.config.js`

```
module.exports = {
    extends: [
        '@oakfinch/commitlint-config'
    ]
}
```
npm package: @oakfinch/eslint-config
Description: Shared base ESLint config for @oakfinch projects
Author: Nate Volker
Latest version: 2.0.17

# eslint-config
Shared base [ESLint](https://eslint.org) config for @oakfinch projects

------

[![license](https://badgen.net/github/license/oakfinch/configs)](https://github.com/oakfinch/configs/blob/main/LICENSE)
[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label=)](https://www.typescriptlang.org/)

[![latest release on npm](https://badgen.net/npm/v/@oakfinch/eslint-config?icon=npm&label=)](https://npmjs.com/package/@oakfinch/eslint-config)
[![latest release on github](https://badgen.net/github/release/oakfinch/eslint-config?icon=github&label=)](https://github.com/oakfinch/eslint-config/releases/latest)

------

[![github](https://badgen.net/badge/icon/github?icon=github&scale=2&label=)](https://github.com/oakfinch/eslint-config/)

------


## Installation

Using `npm`:

```
npm install -D @oakfinch/eslint-config
```

Using `yarn`:

```
yarn add -D @oakfinch/eslint-config
```

## Usage

`.eslintrc.json`
```
{
    "extends": "@oakfinch/eslint-config"
}
```
npm package: @oakfinch/jest-config
Description: Shared base Jest config for @oakfinch projects
Author: Nate Volker
Latest version: 2.0.0

# jest-config
Shared base [Jest](https://jestjs.io) config for @oakfinch projects

------

[![license](https://badgen.net/github/license/oakfinch/configs)](https://github.com/oakfinch/configs/blob/main/LICENSE)
[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label=)](https://www.typescriptlang.org/)

[![latest release on npm](https://badgen.net/npm/v/@oakfinch/jest-config?icon=npm&label=)](https://npmjs.com/package/@oakfinch/jest-config)
[![latest release on github](https://badgen.net/github/release/oakfinch/jest-config?icon=github&label=)](https://github.com/oakfinch/jest-config/releases/latest)

------

[![github](https://badgen.net/badge/icon/github?icon=github&scale=2&label=)](https://github.com/oakfinch/jest-config/)

------


## Installation

Using `npm`:

```
npm install -D @oakfinch/jest-config
```

Using `yarn`:

```
yarn add -D @oakfinch/jest-config
```

## Usage

`jest.config.js`
```
module.exports = {
  preset: '@oakfinch/jest-config',
};
```
npm package: @oakfinch/lint-staged-config
Description: Shared base lint-staged config for @oakfinch projects
Author: Nate Volker
Latest version: 2.0.0

# lint-staged-config
Shared base [lint-staged](https://github.com/okonet/lint-staged) config for @oakfinch projects

---

[![license](https://badgen.net/github/license/oakfinch/configs)](https://github.com/oakfinch/configs/blob/main/LICENSE)
[![latest release on npm](https://badgen.net/npm/v/@oakfinch/lint-staged-config?icon=npm&label=)](https://npmjs.com/package/@oakfinch/lint-staged-config)
[![latest release on github](https://badgen.net/github/release/oakfinch/lint-staged-config?icon=github&label=)](https://github.com/oakfinch/lint-staged-config/releases/latest)

---

[![github](https://badgen.net/badge/icon/github?icon=github&scale=2&label=)](https://github.com/oakfinch/lint-staged-config/)

---

## Installation

Using `npm`:

```
npm install --save-dev @oakfinch/lint-staged-config
```

Using `yarn`:

```
yarn add -D @oakfinch/lint-staged-config
```

## Usage

`.lintstaged.js`

```
module.exports = {
  ...require("@oakfinch/lint-staged-config"),
  // your rules here
};
```
npm package: @oakfinch/node-utils
Description: Node utility library with enhanced TypeScript support
Author: Nate Volker
Latest version: 1.0.20

# node-utils
Node utility library with enhanced TypeScript support

------

[![license](https://badgen.net/github/license/oakfinch/node-utils)](https://github.com/oakfinch/node-utils/blob/main/LICENSE)
[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label=)](https://www.typescriptlang.org/)

[![Build](https://github.com/oakfinch/node-utils/actions/workflows/build.yml/badge.svg)](https://github.com/oakfinch/node-utils/actions/workflows/build.yml)
[![Tests](https://github.com/oakfinch/node-utils/actions/workflows/tests.yml/badge.svg)](https://github.com/oakfinch/node-utils/actions/workflows/tests.yml)
[![CodeQL](https://github.com/oakfinch/node-utils/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/oakfinch/node-utils/actions/workflows/codeql-analysis.yml)

[![latest release on npm](https://badgen.net/npm/v/@oakfinch/node-utils?icon=npm&label=)](https://npmjs.com/package/@oakfinch/node-utils)
[![latest release on github](https://badgen.net/github/release/oakfinch/node-utils?icon=github&label=)](https://github.com/oakfinch/node-utils/releases/latest)
[![minified + gzipped](https://badgen.net/bundlephobia/minzip/@oakfinch/node-utils?label=minified%20%2B%20gzipped)](https://bundlephobia.com/package/@oakfinch/node-utils)

------

[![github](https://badgen.net/badge/icon/github?icon=github&scale=2&label=)](https://github.com/oakfinch/node-utils/) 
[![docs](https://badgen.net/badge/%F0%9F%93%8B/documentation?scale=2)](https://oakfinch.github.io/node-utils/modules.html)

------

## Installation

Using `npm`:

```
npm install @oakfinch/node-utils
```

Using `yarn`:

```
yarn add @oakfinch/node-utils
```

## Usage

See [the API documentation](https://oakfinch.github.io/node-utils/modules.html) for details
npm package: @oakfinch/prettier-config
Description: Shared base prettier config for @oakfinch projects
Author: Nate Volker
Latest version: 2.0.3

# prettier-config
Shared base [Prettier](https://prettier.io) config for @oakfinch projects

---

[![license](https://badgen.net/github/license/oakfinch/configs)](https://github.com/oakfinch/configs/blob/main/LICENSE)
[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label=)](https://www.typescriptlang.org/)

[![latest release on npm](https://badgen.net/npm/v/@oakfinch/prettier-config?icon=npm&label=)](https://npmjs.com/package/@oakfinch/prettier-config)
[![latest release on github](https://badgen.net/github/release/oakfinch/prettier-config?icon=github&label=)](https://github.com/oakfinch/prettier-config/releases/latest)

---

[![github](https://badgen.net/badge/icon/github?icon=github&scale=2&label=)](https://github.com/oakfinch/prettier-config/)

---

## NOTE

This package is used by [`@oakfinch/eslint-config`](../eslint) via
[`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier).
If you're using `@oakfinch/eslint-config` and don't need to add any custom
prettier configuration, you do not need this package.

## Installation

Using `npm`:

```
npm install -D @oakfinch/prettier-config
```

Using `yarn`:

```
yarn add -D @oakfinch/prettier-config
```

## Usage

`.prettierrc.js`

```
module.exports = {
  ...require("@oakfinch/prettier-config"),
  // your rules here
};
```
npm package: @oakfinch/rollup-config
Description: Shared base rollup config for @oakfinch projects
Author: Nate Volker
Latest version: 2.0.19

# rollup-config
Shared base [rollup](https://rollupjs.org/guide/en/) config for @oakfinch projects

------

[![license](https://badgen.net/github/license/oakfinch/configs)](https://github.com/oakfinch/configs/blob/main/LICENSE)
[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label=)](https://www.typescriptlang.org/)

[![latest release on npm](https://badgen.net/npm/v/@oakfinch/rollup-config?icon=npm&label=)](https://npmjs.com/package/@oakfinch/rollup-config)
[![latest release on github](https://badgen.net/github/release/oakfinch/tsconfig?icon=github&label=)](https://github.com/oakfinch/tsconfig/releases/latest)

------

[![github](https://badgen.net/badge/icon/github?icon=github&scale=2&label=)](https://github.com/oakfinch/tsconfig/)

------

## Installation

Using `npm`:

```
npm install --save-dev @oakfinch/rollup-config
```

Using `yarn`:

```
yarn add -D @oakfinch/rollup-config
```

## Usage

`rollup.config.js`
```javascript
import { configs } from '@oakfinch/rollup-config'

export default configs
```

For libraries, CommonJS and ES modules will be created in `dist/cjs` and `dist/es`.

An application bundle will be built in `dist/bundle/app.js`
(and `dist/bundle/app.min.js`) if your project has a file named `src/app.js`
(or `src/app.ts`) with that file being used as the entrypoint.
npm package: @oakfinch/ts-extra
Description: Extended utility types and functions for TypeScript
Author: Nate Volker
Latest version: 1.0.25

# ts-extra
Extended utility types and functions for TypeScript

------

[![license](https://badgen.net/github/license/oakfinch/ts-extra)](https://github.com/oakfinch/ts-extra/blob/main/LICENSE)
[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label=)](https://www.typescriptlang.org/)

[![Build](https://github.com/oakfinch/ts-extra/actions/workflows/build.yml/badge.svg)](https://github.com/oakfinch/ts-extra/actions/workflows/build.yml)
[![Tests](https://github.com/oakfinch/ts-extra/actions/workflows/tests.yml/badge.svg)](https://github.com/oakfinch/ts-extra/actions/workflows/tests.yml)
[![CodeQL](https://github.com/oakfinch/ts-extra/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/oakfinch/ts-extra/actions/workflows/codeql-analysis.yml)

[![latest release on npm](https://badgen.net/npm/v/@oakfinch/ts-extra?icon=npm&label=)](https://npmjs.com/package/@oakfinch/ts-extra)
[![latest release on github](https://badgen.net/github/release/oakfinch/ts-extra?icon=github&label=)](https://github.com/oakfinch/ts-extra/releases/latest)
[![minified + gzipped](https://badgen.net/bundlephobia/minzip/@oakfinch/ts-extra?label=minified%20%2B%20gzipped)](https://bundlephobia.com/package/@oakfinch/ts-extra)

------

[![github](https://badgen.net/badge/icon/github?icon=github&scale=2&label=)](https://github.com/oakfinch/ts-extra/) | 
[![docs](https://badgen.net/badge/%F0%9F%93%8B/documentation?scale=2)](https://oakfinch.github.io/ts-extra/modules.html)

------

## Installation

Using `npm`:

```
npm install --save-dev @oakfinch/ts-extra
```

Using `yarn`:

```
yarn add -D @oakfinch/ts-extra
```

## Usage

See [the API documentation](https://oakfinch.github.io/ts-extra/modules.html) for details

## Examples

```TypeScript
import { Mutable } from '@oakfinch/ts-extra'
const DEFAULTS = [1, 2, 3] as const;

const fn = <T extends number[]>(
  first: number,
  rest: T,
) => first + Math.max(...rest);

// This generates a TS error:
// Argument of type 'readonly [1, 2, 3]' is not assignable to parameter of type 'number[]'.
// The type 'readonly [1, 2, 3]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
const result = fn(1, DEFAULTS);

// This works fine!
const result = fn(1, (DEFAULTS as Mutable<typeof DEFAULTS>));
```

```TypeScript
import { Value, Tuple } from '@oakfinch/ts-extra'

const ENV_CONFIG = {
  LOCAL: {
    NAME: 'local',
    MINIFY: false,
  },
  DEV: {
    NAME: 'dev',
    MINIFY: false,
  },
  QA: {
    NAME: 'qa',
    MINIFY: true,
  },
  STAGE: {
    NAME: 'stage',
    MINIFY: true,
  },
  PROD: {
    NAME: 'prod',
    MINIFY: true,
  },
} as const;

const MINIFY_ENV_NAMES = (
  Object.values(ENV_CONFIG)
    .filter(({ MINIFY }) => MINIFY)
    .map(({ NAME }) => NAME)
) as Tuple<Extract<Value<typeof ENV_CONFIG>, { MINIFY: true }>['NAME']>;

// const MINIFY_ENV_NAMES: ["qa", "stage", "prod"];
```
npm package: @oakfinch/ts-utils
Description: Utility library with enhanced TypeScript support
Author: Nate Volker
Latest version: 1.0.37

# ts-utils

Utility library with enhanced TypeScript support

---

[![license](https://badgen.net/github/license/oakfinch/ts-utils)](https://github.com/oakfinch/ts-utils/blob/main/LICENSE)
[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label=)](https://www.typescriptlang.org/)

[![Build](https://github.com/oakfinch/ts-utils/actions/workflows/build.yml/badge.svg)](https://github.com/oakfinch/ts-utils/actions/workflows/build.yml)
[![Tests](https://github.com/oakfinch/ts-utils/actions/workflows/tests.yml/badge.svg)](https://github.com/oakfinch/ts-utils/actions/workflows/tests.yml)
[![Coverage](https://codecov.io/gh/oakfinch/ts-utils/branch/main/graph/badge.svg?token=1XYUL2X4J1)](https://codecov.io/gh/oakfinch/ts-utils)
[![CodeQL](https://github.com/oakfinch/ts-utils/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/oakfinch/ts-utils/actions/workflows/codeql-analysis.yml)

[![latest release on npm](https://badgen.net/npm/v/@oakfinch/ts-utils?icon=npm&label=)](https://npmjs.com/package/@oakfinch/ts-utils)
[![latest release on github](https://badgen.net/github/release/oakfinch/ts-utils?icon=github&label=)](https://github.com/oakfinch/ts-utils/releases/latest)
[![minified + gzipped](https://badgen.net/bundlephobia/minzip/@oakfinch/ts-utils?label=minified%20%2B%20gzipped)](https://bundlephobia.com/package/@oakfinch/ts-utils)

---

[![github](https://badgen.net/badge/icon/github?icon=github&scale=2&label=)](https://github.com/oakfinch/ts-utils/)
[![docs](https://badgen.net/badge/%F0%9F%93%8B/documentation?scale=2)](https://oakfinch.github.io/ts-utils/modules.html)

---

## Installation

Using `npm`:

```
npm install --save-dev @oakfinch/ts-utils
```

Using `yarn`:

```
yarn add -D @oakfinch/ts-utils
```

## Usage

See [the API documentation](https://oakfinch.github.io/ts-utils/modules.html) for details
npm package: @oakfinch/tsconfig
Description: Shared base tsconfig for @oakfinch projects
Author: Nate Volker
Latest version: 2.0.6

# tsconfig
Shared base [tsconfig](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for @oakfinch projects

------

[![license](https://badgen.net/github/license/oakfinch/configs)](https://github.com/oakfinch/configs/blob/main/LICENSE)
[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label=)](https://www.typescriptlang.org/)

[![latest release on npm](https://badgen.net/npm/v/@oakfinch/tsconfig?icon=npm&label=)](https://npmjs.com/package/@oakfinch/tsconfig)
[![latest release on github](https://badgen.net/github/release/oakfinch/tsconfig?icon=github&label=)](https://github.com/oakfinch/tsconfig/releases/latest)

------

[![github](https://badgen.net/badge/icon/github?icon=github&scale=2&label=)](https://github.com/oakfinch/tsconfig/)

------

## Installation

Using `npm`:

```
npm install --save-dev @oakfinch/tsconfig
```

Using `yarn`:

```
yarn add -D @oakfinch/tsconfig
```

## Usage

### Basic usage

Defaults to a commonjs build with an es5 target, output to the `./dist` directory

`tsconfig.json`
```json
{
  "extends": "@oakfinch/tsconfig"
}
```

### Explicitly specify a cjs build

`tsconfig.json`
```json
{
  "extends": "@oakfinch/tsconfig/tsconfig.cjs.json"
}
```

### ESM build

`tsconfig.json`
```json
{
  "extends": "@oakfinch/tsconfig/tsconfig.esm.json",
}
```

### Multiple builds

You can create multiple builds by having multiple config files, and then
specifying them with the `--build` flag.

When using multiple builds, you'll want to reference the files as `@oakfinch/tsconfig/<type>`
rather than `@oakfinch/tsconfig/tsconfig.<type>.json` to avoid the builds overriding
each other due to having the same `outDir`.

`tsconfig.json`
```json
{
  "extends": "@oakfinch/tsconfig/tsconfig.cjs.json"
}
```

`tsconfig.esm.json`
```json
{
  "extends": "@oakfinch/tsconfig/tsconfig.esm.json",
}
```

```bash
tsc --build tsconfig.json tsconfig.esm.json 
```
npm package: @oakjs/addon-remirror
Description: 🌳 Modern, lightweight & modulable page builder
Author: Ugo Stephant
Latest version: 3.15.1

<div align="center">

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.junipero.design/images/oak-logo-light.svg" />
  <img src="https://cdn.junipero.design/images/oak-logo.svg" height="50" />
</picture>

<br />
<br />

[![GitHub](https://img.shields.io/github/license/p3ol/oak.svg)](https://github.com/p3ol/oak)
[![npm](https://img.shields.io/npm/v/@oakjs/addon-remirror.svg)](https://www.npmjs.com/package/@oakjs/addon-remirror)
[![CI](https://github.com/p3ol/oak/actions/workflows/ci.yml/badge.svg)](https://github.com/p3ol/oak/actions/workflows/ci.yml)
[![codecov](https://codecov.io/gh/p3ol/oak/branch/master/graph/badge.svg)](https://codecov.io/gh/p3ol/oak)

### @oakjs/addon-remirror
An addon to use [Remirror](https://remirror.io/) as an oak field

</div>

# Installation

```sh
yarn add @oakjs/addon-remirror remirror @remirror/react @remirror/pm
```

# Usage

```jsx
import { Builder, baseAddon } from '@oakjs/react';
import { remirrorFieldAddon } from '@oakjs/addon-remirror';

import '@oakjs/theme/dist/oak.min.css';
import '@oakjs/addon-remirror/dist/oak-addon-remirror.min.css';

const myAddon = () => ({
  overrides: [{
    type: 'component',
    targets: ['title', 'text', 'button'],
    fields: [{
      key: 'content',
      type: 'remirror',
    }],
  }],
});

export default () => {
  const [content, setContent] = useState([]);

  return (
    <Builder
      addons={[baseAddon(), remirrorFieldAddon(), myAddon()]}
      value={content}
      onChange={setContent}
    />
  );
};
```

# Documentation

The `remirrorFieldAddon()` addon adds a new field with the `remirror` type.

You can then either directly create component settings with the `remirror` field type:

```jsx
import { BuilderField, baseAddon } from '@oakjs/react';
import { remirrorFieldAddon } from '@oakjs/addon-remirror';

const myAddon = () => ({
  settings: [{
    id: 'my-setting',
    type: 'remirror',
    key: 'property.subProperty',
  }],
});

export default () => (
  <BuilderField
    addons={[baseAddon(), remirrorFieldAddon(), myAddon()]}
    value={content}
    onChange={setContent}
  />
);
```

Or override existing component settings:

```jsx
import { Builder, baseAddon } from '@oakjs/react';
import { remirrorFieldAddon } from '@oakjs/addon-remirror';

const myAddon = () => ({
  overrides: [{
    type: 'component',
    targets: ['title', 'text', 'button'],
    fields: [{
      key: 'content',
      type: 'remirror',
    }],
  }],
});

export default () => (
  <Builder
    addons={[baseAddon(), remirrorFieldAddon(), myAddon()]}
    value={content}
    onChange={setContent}
  />
);
```

# Contributing

[![](https://contrib.rocks/image?repo=p3ol/oak)](https://github.com/p3ol/oak/graphs/contributors)

Please check the [CONTRIBUTING.md](https://github.com/p3ol/oak/blob/master/CONTRIBUTING.md) doc for contribution guidelines.


# License

This software is licensed under [MIT](https://github.com/p3ol/oak/blob/master/LICENSE).
npm package: @oakjs/strapi-plugin
Description: 🌳 Modern, lightweight & modulable page builder
Author: Ugo Stephant
Latest version: 3.15.1

<div align="center">

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.junipero.design/images/oak-logo-light.svg" />
  <img src="https://cdn.junipero.design/images/oak-logo.svg" height="50" />
</picture>

<br />
<br />

[![GitHub](https://img.shields.io/github/license/p3ol/oak.svg)](https://github.com/p3ol/oak)
[![npm](https://img.shields.io/npm/v/@oakjs/strapi-plugin.svg)](https://www.npmjs.com/package/@oakjs/strapi-plugin)
[![CI](https://github.com/p3ol/oak/actions/workflows/ci.yml/badge.svg)](https://github.com/p3ol/oak/actions/workflows/ci.yml)
[![codecov](https://codecov.io/gh/p3ol/oak/branch/master/graph/badge.svg)](https://codecov.io/gh/p3ol/oak)

### @oakjs/strapi-plugin
An [Strapi](https://strapi.io) plugin to add Oak as a custom field

</div>

# Installation

```sh
yarn add @oakjs/strapi-plugin
```

# Usage

Strapi automatically detects the plugin and adds it to the list of available fields. You have nothing special to do.

# Customization

If you need to extend Oak's behavior, you need to create a new admin extension and use the `oak:addons:add` hook to add your custom addons inside strapi's `src/admin/app.js`:

```js
export default {
  bootstrap (app) {
    app.registerHook('oak:addons:add', () => ({
      fields: {},
      components: {},
      settings: {},
    }));
  },
}
```

ℹ️ Remember to rebuild the whole admin after each change, using `strapi build`.

# Contributing

[![](https://contrib.rocks/image?repo=p3ol/oak)](https://github.com/p3ol/oak/graphs/contributors)

Please check the [CONTRIBUTING.md](https://github.com/p3ol/oak/blob/master/CONTRIBUTING.md) doc for contribution guidelines.


# License

This software is licensed under [MIT](https://github.com/p3ol/oak/blob/master/LICENSE).
npm package: @oakjs/theme
Description: 🌳 Modern, lightweight & modulable page builder
Author: Ugo Stephant
Latest version: 3.15.0

<div align="center">

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.junipero.design/images/oak-logo-light.svg" />
  <img src="https://cdn.junipero.design/images/oak-logo.svg" height="50" />
</picture>

<br />
<br />

[![GitHub](https://img.shields.io/github/license/p3ol/oak.svg)](https://github.com/p3ol/oak)
[![npm](https://img.shields.io/npm/v/@oakjs/theme.svg)](https://www.npmjs.com/package/@oakjs/theme)
[![CI](https://github.com/p3ol/oak/actions/workflows/ci.yml/badge.svg)](https://github.com/p3ol/oak/actions/workflows/ci.yml)
[![codecov](https://codecov.io/gh/p3ol/oak/branch/master/graph/badge.svg)](https://codecov.io/gh/p3ol/oak)

### @oakjs/theme
Theme base for Oak

</div>

# Installation

```sh
yarn add @oakjs/theme
```

# Usage

```javascript
import '@oakjs/theme/dist/oak.min.css';
```

If you need to tree-shake some unneeded styles, you can import every component/utility manually instead:

```css
@import "@oakjs/theme/dist/css/reset.min.css";
@import "@oakjs/theme/dist/css/Builder.min.css";
@import "@oakjs/theme/dist/css/Catalogue.min.css";
@import "@oakjs/theme/dist/css/Editable.min.css";
@import "@oakjs/theme/dist/css/Option.min.css";
@import "@oakjs/theme/dist/css/Element.min.css";
@import "@oakjs/theme/dist/css/Row.min.css";
/* ...and so on */
```

The full list is available inside the `dist/css` folder.

# Contributing

[![](https://contrib.rocks/image?repo=p3ol/oak)](https://github.com/p3ol/oak/graphs/contributors)

Please check the [CONTRIBUTING.md](https://github.com/p3ol/oak/blob/master/CONTRIBUTING.md) doc for contribution guidelines.


# License

This software is licensed under [MIT](https://github.com/p3ol/oak/blob/master/LICENSE).