open-index/open-npm huggingface dataset:
npm package: @opensea/api-types
Description: Auto-generated TypeScript types from the OpenSea API OpenAPI spec
Author: OpenSea Developers
Latest version: 0.2.0

# @opensea/api-types

Auto-generated TypeScript types from the OpenSea API OpenAPI spec.

## Updating the spec

```bash
# Fetch latest spec from the API (once the endpoint is live)
pnpm --filter @opensea/api-types run update-spec

# Rebuild types
pnpm --filter @opensea/api-types run build
```

The `opensea-api.json` file is committed to git intentionally — it's the versioned source of truth for codegen. The `update-spec` script fetches the latest version from the API and writes it locally. Commit the updated spec so diffs show exactly what changed in the API.

## Usage

```typescript
import type { Schemas, OperationResponse, OperationQueryParams } from "@opensea/api-types";

type Collection = Schemas["CollectionResponse"];
type ListingsResult = OperationResponse<"get_listings_1">;
type ListParams = OperationQueryParams<"list_collections">;
```
npm package: @opensea/cloudflare-cache-worker-utils
Description: Various utilities for implementing cache workers on Cloudflare
Author: OpenSea Developers
Latest version: 1.0.19

# Cloudflare cache worker utils

Various utilities for implementing cache workers on Cloudflare

## Features :rocket:

- Implements the `age` header, by sucesfully respecting the origin response age and subtracting that from TTL on Cloudflare
- Implements the `stale-while-revalidate` directive
- Don't cache if origin request has been `REVALIDATED`

## Local development

### Running tests

```sh
npm run test
```
npm package: @opensea/i18n-dl
Description: Package for i18n key download
Author: OpenSea Developers
Latest version: 1.0.10

# download

`@opensea/i18n-dl` downloads & extracts translated files from Smartling's Translation Management System.

## Getting started

### Install

```sh
npm install --save-dev @opensea/i18n-dl
```

### Usage

Published packages comes with a `i18n-dl` binary.

```sh
npm run i18n-dl --directory ./locales
```

You can find the full example using Github Actions [here](https://github.com/ProjectOpenSea/web-app-template/blob/main/.github/workflows/i18n-download.yml).

## Running tests

```sh
yarn test
```
npm package: @opensea/i18n-extract
Description: Package for i18n key extractions
Author: OpenSea Developers
Latest version: 1.0.13

# extract

`@opensea/i18n-extract` analyzes and extracts translation keys with their default values from source files. Extracted translation keys are meant to be uploaded to a translation management system for translation into other languages.

**How?**

Program looks for references to the `useTranslation()` and `<Trans />` from [next-translate](https://github.com/aralroca/next-translate) using `@babel/parser` and `@babel/traverse`. Note that wrapping these into custom hooks/components will break the translation key extraction.

## Getting started

### Install

```sh
npm install --save-dev @opensea/i18n-extract
```

### Usage

Published packages comes with a `i18n-extract` binary.

```sh
npm run i18n-extract --directory ./ --out locales/en-US
```

## Local development

### Running tests

```sh
yarn test
```
npm package: @opensea/i18n-upload
Description: Package for i18n key upload
Author: OpenSea Developers
Latest version: 1.0.10

# upload

`@opensea/i18n-upload` takes a list of files with extracted translation keys (e.g via [@opensea/i18n-extract](../extract/)) and uploads them as a job Smartling's Translation Management System. These files will get automatically translated to the target languages and be available for download via [@opensea/i18n-dl](../download/).

## Getting started

### Install

```sh
npm install --save-dev @opensea/i18n-upload
```

### Usage

Published packages comes with a `i18n-upload` binary.

```sh
npm run i18n-upload --directory ./locales
```

You can find the full example using Github Actions [here](https://github.com/ProjectOpenSea/web-app-template/blob/main/.github/workflows/ci.yml). Look for the `i18n-upload` job.

## Running tests

```sh
yarn test
```
npm package: @opensea/next-fonts
Description: ui-kit fonts for nextjs
Author: OpenSea Developers
Latest version: 0.0.10

# @opensea/next-fonts

`@opensea/next-fonts` provides fonts for `@opensea/ui-kit` into a NextJS based project.

## Getting started

### Install

```sh
npm install @opensea/next-fonts
```

### Usage

```jsx

```
npm package: @opensea/next-themes
Description: ui-kit + next-themes integration
Author: OpenSea Developers
Latest version: 1.0.18

# @opensea/next-themes

[![npm version](https://badge.fury.io/js/@opensea%2Fnext-themes.svg)](https://badge.fury.io/js/@opensea%2Fnext-themes)

`@opensea/next-themes` provides a seamless integration of `@opensea/ui-kit` into a NextJS based project.

## Getting started

### Install

```sh
pnpm add @opensea/next-themes
```

### Usage

```jsx
import { ThemeProvider, ThemeVariant } from "@opensea/next-themes"

type Props = {
    theme?: ThemeVariant // you might need this if you want to override theme in tests/storybook
    children: React.ReactNode
}

const AppProviders = ({ theme }: Props) => {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
}
```
npm package: @opensea/next-translate
Description: Package for custom useTranslate hook
Author: OpenSea Developers
Latest version: 1.0.10

# next-translate

`@opensea/next-translate` wraps [next-translate](https://github.com/aralroca/next-translate) `useTranslate` hook and `<Trans />` component to support in-code defaults for plural translation variants and a slightly improved interface for translations without variables.

## Getting started

### Install

```sh
npm install
```

### Usage

```tsx
import { useTranslate, Trans } from '@opensea/next-translate';

const Example = () => {
  const t = useTranslate('ns1');
  const [count, setCount] = useState(0);

  // Second param is default value and third param variables (optional)
  const noVariables = t('example.noVariables', 'No variables');

  // Default values for "zero", "one", and "other" translations variants can be specified in code
  const plurals = t(
    'example.plurals',
    {
      zero: 'No items',
      one: '1 item',
      other: '{{count}} items'
    },
    { count }
  );

  // Default value for "zero" can be omitted and default value for "other" will be used
  const optionalZero = t(
    'example.optionalZero',
    { one: '1 item', other: '{{count}} items' },
    { count }
  );

  // ...

  return (
    <Trans
      i18nKey="mykey"
      ns="mynamespace"
      components={{ link: <a href="www.google.com" /> }}
      defaultTrans={{
        zero: '<link>Zero items, check it out!</link>',
        one: '<link>One item, check it out!</link>',
        other: '<link>More items, check it out!</link>'
      }}
      count={count}
    />
  );
};
```

## Local development

### Running tests

```sh
npm run test
```
npm package: @opensea/next-ui-kit
Description: NextJS bindings for OpenSea's Design System implementation in React
Author: OpenSea Developers
Latest version: 3.0.151

# @opensea/next-ui-kit

[![npm version](https://badge.fury.io/js/@opensea%2Fnext-ui-kit.svg)](https://badge.fury.io/js/@opensea%2Fnext-ui-kit)

`@opensea/next-ui-kit` implements [Next.js](https://github.com/vercel/next.js) bindings for `@opensea/ui-kit`. In practice that means that it uses components like `next/link` instead of a native `a` link to implement navigation.

## Getting started

### Install

```sh
pnpm add @opensea/next-ui-kit
```

### Usage

```jsx
import { Item } from "@opensea/next-ui-kit"

export const Component = () => {
  return (
    <Item href="/my-super-page">
      <Item.Content>
        <Item.Title>Hello Next.js</Item.Title>
      </Item.Content>
    </Item>
  )
}
```
npm package: @opensea/seadn
Description: Javascript SDK to work with SeaDN
Author: OpenSea Developers
Latest version: 2.3.11

# SeaDN Javascript SDK

## Getting Started

### Installation

**npm**

```sh
npm install @opensea/seadn
```

**yarn**

```sh
yarn install @opensea/seadn
```

**pnpm**

```sh
pnpm add @opensea/seadn
```

### Usage

```js
import { optimize } from "@opensea/seadn";

const resized = optimize(image, { height: 100, width: 100 });
```

## Publishing

```sh
pnpm build
npm publish --access public
```
npm package: @opensea/ui-kit
Description: OpenSea's Design System implementation in React
Author: OpenSea Developers
Latest version: 3.0.151

# @opensea/ui-kit

[![Storybook](https://raw.githubusercontent.com/storybooks/brand/main/badge/badge-storybook.svg)](https://main--6504e75013bb0df5164a7217.chromatic.com/)
[![npm version](https://badge.fury.io/js/@opensea%2Fui-kit.svg)](https://badge.fury.io/js/@opensea%2Fui-kit)

`@opensea/ui-kit` houses our design system components as well as various re-usable utilities and styles.

## Getting started

### Install

```sh
pnpm add @opensea/ui-kit
```

or

```sh
yarn add @opensea/ui-kit
```

### Usage

```jsx
import { Text } from "@opensea/ui-kit"
import { CircleFilled } from "@opensea/ui-kit/icons"

export const Component = () => {
  return (
    <>
      <Text size="md">Some very nice text</Text>
      <Button icon={CircleFilled}>And a button</Button>
    </>
  )
}
```

## Local development

### Running tests

```sh
pnpm test:unit
```

## Entrypoints

`@opensea/ui-kit` comes with multiple entrypoints.

1. `@opensea/ui-kit` ~ components & utilities
1. `@openase/ui-kit/hooks` ~ hooks
1. `@openase/ui-kit/icons` ~ icons & logos
1. `@openase/ui-kit/fs` ~ tailwind and filesystem helpers

## Setting up tailwind config

```css
@import "tailwindcss";
@import "tw-animate-css";
@import "@opensea/ui-kit/styles/theme.css";
@source "../node_modules/@opensea/ui-kit/**/*.{ts,tsx,js,jsx}";
```

## Usage with NextJS

### Theming

Take a look at the [@opensea/next-themes](../next-themes) package.

### Compound components in server components

Some components like [Select](./src/components/Select/Select.tsx) have associated compound components (`Select.Item`), where `Item` is a compound component name. Compound components cannot be used in server components. Instead, use `SelectItem` syntax or add `'use client';` directive to the top of the file.

Example that will not work in server components:

```tsx
import { Select } from "@opensea/ui-kit"

// This will throw an error
export default function Page() {
  return <Select.Item size="sm">Hello</Select.Item>
}
```

Example with `'use client';` directive:

```tsx
"use client"
import { Select } from "@opensea/ui-kit"

// No error
export default function Page() {
  return <Select.Item size="sm">Hello</Select.Item>
}
```

Example with `SelectItem` syntax:

```tsx
import { SelectItem } from "@opensea/ui-kit"

// No error
export default function Page() {
  return <SelectItem size="sm">Hello</SelectItem>
}
```
npm package: @openseadragon-imaging/openseadragon-consolehook
Description: OpenSeadragon plugin which provides hooks into console.
Author: Mark Salsbery
Latest version: 2.2.1

# OpenSeadragonConsoleHook

[![Gitter](https://badges.gitter.im/openseadragon-imaging/community.svg)](https://gitter.im/openseadragon-imaging/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

OpenSeadragonConsoleHook is a plugin for [OpenSeadragon](https://github.com/openseadragon/openseadragon)
which provides hooks into the console output to provide custom console logging.

[View the Documentation](https://openseadragon-imaging.github.io/docs/openseadragon-consolehook/index.html)

[Demo/Test Site](https://openseadragon-imaging.github.io/#/consolehook)

## Demo/Test Site

The [demo site](https://openseadragon-imaging.github.io/#/consolehook) is an example using OpenSeadragonConsoleHook in a React application.

The source code can be found [here](https://github.com/openseadragon-imaging/openseadragon-imaging/tree/master/site.github.io/src/page-consolehook).