open-index/open-npm huggingface dataset:
npm package: @lineandvertexsoftware/overlay-d3
Description: D3.js overlay for interactive axes, zoom, and legends
Author: Vertexa contributors
Latest version: 0.1.12

# @lineandvertexsoftware/overlay-d3

D3 overlay module used by Vertexa Chart for axes, zoom/pan, guides, selection, and legend.

## Install

```bash
npm install @lineandvertexsoftware/overlay-d3
```

## Usage

```ts
import { OverlayD3 } from "@lineandvertexsoftware/overlay-d3";
```

This package is primarily intended as an internal building block of
`@lineandvertexsoftware/vertexa-chart`, but it can be used directly for custom
overlay workflows.

For full docs and examples, see:
[https://github.com/LineandVertexSoftware/vertexa-chart/blob/main/README.md](https://github.com/LineandVertexSoftware/vertexa-chart#readme)
npm package: @lineandvertexsoftware/renderer-webgpu
Description: WebGPU rendering engine for high-performance visualization
Author: Vertexa contributors
Latest version: 0.1.12

# @lineandvertexsoftware/renderer-webgpu

WebGPU rendering engine used by Vertexa Chart.

## Install

```bash
npm install @lineandvertexsoftware/renderer-webgpu
```

## Usage

```ts
import { WebGPURenderer } from "@lineandvertexsoftware/renderer-webgpu";
```

This package is primarily intended as an internal rendering module for
`@lineandvertexsoftware/vertexa-chart`.

For full docs and examples, see:
[https://github.com/LineandVertexSoftware/vertexa-chart/blob/main/README.md](https://github.com/LineandVertexSoftware/vertexa-chart/blob/main/README.md)
npm package: @lineandvertexsoftware/vertexa-chart
Description: High-performance charting library using WebGPU and D3.js
Author: Vertexa contributors
Latest version: 0.1.12

# @lineandvertexsoftware/vertexa-chart

Core chart API for Vertexa Chart.

## Install

```bash
npm install @lineandvertexsoftware/vertexa-chart
```

## Usage

```ts
import { Chart } from "@lineandvertexsoftware/vertexa-chart";

const chart = new Chart(document.querySelector("#root")!, {
  width: 920,
  height: 520,
  traces: [
    { type: "scatter", x: [1, 2, 3], y: [10, 20, 30] }
  ]
});
```

### Secondary Y-Axis (Dual Scale)

Bind any trace to a right-side secondary y-axis by setting `yaxis: "y2"`:

```ts
const chart = new Chart(document.querySelector("#root")!, {
  width: 920,
  height: 520,
  traces: [
    { type: "scatter", x: [1, 2, 3], y: [10, 20, 30], name: "Revenue" },
    { type: "scatter", x: [1, 2, 3], y: [1000, 2000, 3000], yaxis: "y2", name: "Users" }
  ],
  layout: {
    yaxis2: { title: "Users", type: "linear" }
  }
});
```

- Each axis computes its own domain independently, so different scales don't interfere.
- Right-side padding is added automatically when y2 traces are present (override with `layout.margin.right`).
- Hover and click events report which axis a point belongs to via the `yAxis` field on `ChartPoint`.
- Supports all axis types on y2: `linear`, `log`, `time`, and `category`.
- Works with all trace types: `scatter`, `bar`, `area`, `histogram`.

## Public API

- `setTraces(traces)`
- `appendPoints(updates, options?)`
- `exportPng(options?)`
- `exportSvg(options?)`
- `exportCsvPoints(options?)`
- `setLayout(layout)`
- `setSize(width, height)`
- `panBy(dxCss, dyCss)`
- `zoomBy(factor, centerPlot?)`
- `resetView()`
- `fitToData()`
- `autoscaleY()`
- `setAspectLock(enabled)`
- `setPerformanceMode(mode)`
- `getPerformanceStats()`
- `destroy()`

For full examples and docs, see the monorepo README:
[https://github.com/LineandVertexSoftware/vertexa-chart/blob/main/README.md](https://github.com/LineandVertexSoftware/vertexa-chart/blob/main/README.md)
npm package: @linear-webdev/mime-types
Description: This began as a fork of [mime-types](https://github.com/jshttp/mime-types) to be an edge-compatible version. It has since been modified to further suit our needs
Latest version: 1.0.11

This began as a fork of [mime-types](https://github.com/jshttp/mime-types) to be
an edge-compatible version. It has since been modified to further suit our needs

See the original license for the original source code in [LICENSE](./LICENSE)
npm package: @linear-webdev/react
Description: Learn more: [docs.uploadthing.com](https://docs.uploadthing.com)
Latest version: 1.0.11

# @linear-webdev/react

Learn more: [docs.uploadthing.com](https://docs.uploadthing.com)

## Examples

### Components V1

```tsx
// Name is temp
import { UploadButton } from "@linear-webdev/react";

import type { FileRouter } from "./someUploadRouter";

export const SomePage = () => {
  return (
    <UploadButton<FileRouter>
      endpoint="someTypesafeEndpoint"
      onNewFileDropped={(file) => {
        console.log("new file added by user", file);
      }}
      onClientStartedUpload={(file) => {
        console.log("new file added by user", file);
      }}
      onClientFinishedUpload={(file) => {
        console.log(file);
      }}
    />
  );
};
```

### Components V2

```tsx
// Name is temp
import {
  UploadFileView,
  UploadProvider,
  UploadZone,
} from "@linear-webdev/react";

import type { FileRouter } from "./someUploadRouter";

export const SomePage = () => {
  return (
    <UploadProvider<FileRouter>
      endpoint="someTypesafeEndpoint"
      onUpload={(file) => {
        console.log(file);
      }}
    >
      <div>Whatever You Want</div>
      <UploadZone>
        <div>Drop files here (you can style this yourself)</div>
      </UploadZone>
      <UploadFileView />
    </UploadProvider>
  );
};
```
npm package: @linear/cli
Description: A CLI for [Linear](https://linear.app).
Latest version: 0.0.5

# lin

A CLI for [Linear](https://linear.app).

## Install

```bash
❯ npm i -g @linear/cli
```

## Usage

`lin` has two commands: `lin new` to create issues and `lin checkout` to check out branches for issues you're currently working on.

```bash
Usage
  ❯ lin new

Description
  Creates a new issue and copies its branch name to your clipboard

Options
  --team         Team identifier
  --title        Issue title
  --description  Issue description
```

```bash
  Usage
    ❯ lin checkout

  Description
    Checkout an existing branch
```
npm package: @linearcommerce/medusa-category-thumbnail
Description: Category Images plugin for Medusa JS.
Author: LinearCommerce
Latest version: 0.0.3

<h1 align="center">Category Thumbnail</h1>

<p>This plugin provides the ability to upload and manage a <strong>thumbnail image for categories</strong>, enhancing the visual representation of your catalog. By associating an image with each category, you can deliver a more engaging browsing experience and improve storefront navigation.</p>

<br />

## Previews
<div style="display:flex; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory;">
  <img src="https://linearcommerce.s3.us-east-1.amazonaws.com/assest/image+(3).png" width="300" style="scroll-snap-align: start;" />
</div>


## Dependencies
**Install react-dropzone and multer** 

```
npm install --save react-dropzone
npm install multer

```

**If you are using Local storage for file uploads, you just have to set below configurations inside plugins array in your medusa-config.js file**

```
{
    resolve: "@linearcommerce/medusa-category-thumbnail",
    options: {
      provider: "local",
    },
}
```


**If you are using AWS S3 for file storage, you must have to install the following npm packages dependencies**

**Install aws-sdk/client-s3 and aws-sdk/s3-presigned-post** 

```
npm install @aws-sdk/client-s3
npm install @aws-sdk/s3-presigned-post

```

#### Add below environment variables in your .env file:

```ts
AWS_S3_ACCESS_KEY_ID=Your AWS Access Key ID
AWS_S3_ACCESS_SECRET=Your AWS Access Secret Key
AWS_S3_REGION=Your AWS Region
AWS_S3_BUCKET=Your AWS Bucket Name
AWS_S3_ENDPOINT=https://s3.amazonaws.com
```

#### Add the plugin to your `medusa-config.ts` file:

```ts
plugins: [
  {
    resolve: '@linearcommerce/medusa-category-thumbnail',
    options: {
      provider: "s3",
    },
  },
],
```


## Compatibility

**To use this plugin, you need to have the minimum versions of the following dependencies:**

```json
"@medusajs/admin-sdk": "^2.8.2",
"@medusajs/cli": "^2.8.2",
"@medusajs/framework": "^2.8.2",
"@medusajs/icons": "^2.8.2",
"@medusajs/js-sdk": "^2.8.2",
"@medusajs/medusa": "^2.8.2",
```

## Usage


## Installation

```
yarn add @linearcommerce/medusa-category-thumbnail

-- OR -- 

npm i @linearcommerce/medusa-category-thumbnail
```


#### Run the database migrations (Adds a table to your database for storing category thumbnails):

```
npx medusa db:migrate
```


## Key Features:

- Upload and manage thumbnail images at the category level.
- Seamlessly display category thumbnails on the storefront to enhance navigation and visual appeal.
- Maintain consistent branding and improve user experience with image-based category representation.
- Simply configure the file upload settings in the Medusa store, and the plugin will handle the rest automatically.
- Supports both local storage and Amazon S3 file upload providers for flexible file management.
npm package: @linearcommerce/product-custom-attributes
Description: Product custom attributes plugin for MedusaJS.
Author: LinearCommerce
Latest version: 0.0.6

<h1 align="center">Product Custom Attributes</h1>

<p>This plugin provides the ability to manage custom attributes at the <strong>category level</strong>, with the option to <strong>sync those attributes to products</strong> within the category. You can then assign and manage values for each attribute at the product level. Additionally, the plugin allows you to configure the <strong>visibility of attributes on the storefront</strong>, ensuring that only the relevant information is displayed to customers.
</strong></p>

<br />

## Previews
<div style="display:flex; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory;">
  <img src="https://linearcommerce.s3.us-east-1.amazonaws.com/assest/custom_attribute.png" width="300" style="scroll-snap-align: start;" />
  <img src="https://linearcommerce.s3.us-east-1.amazonaws.com/assest/two_brand.png" width="300" style="scroll-snap-align: start;" />
</div>

## Dependencies
**To use this plugin, you must have installed the following npm packages dependencies**

**Install aws-sdk/client-s3 and aws-sdk/s3-presigned-post** 

```
npm install @aws-sdk/client-s3
npm install @aws-sdk/s3-presigned-post

```
**Install react-dropzone** 

```
npm install --save react-dropzone

```

## Installation

```
yarn add @linearcommerce/product-custom-attributes

-- OR -- 

npm i @linearcommerce/product-custom-attributes
```

## Compatibility

**To use this plugin, you need to have the minimum versions of the following dependencies:**

```ts
"@medusajs/admin-sdk": "^2.8.2",
"@medusajs/cli": "^2.8.2",
"@medusajs/framework": "^2.8.2",
"@medusajs/icons": "^2.8.2",
"@medusajs/js-sdk": "^2.8.2",
"@medusajs/medusa": "^2.8.2",
```

## Usage

#### Add below environment variables in your .env file If you are using AWS S3 for file uploads:

```ts
AWS_S3_ACCESS_KEY_ID=Your AWS Access Key ID
AWS_S3_ACCESS_SECRET=Your AWS Access Secret Key
AWS_S3_REGION=Your AWS Region
AWS_S3_BUCKET=Your AWS Bucket Name
AWS_S3_ENDPOINT=https://s3.amazonaws.com
```



#### Add the plugin to your `medusa-config.ts` file:

```ts
plugins: [
  {
    resolve: '@linearcommerce/product-custom-attributes',
    options: {},
  },
],
```

#### Run the database migrations (Adds a table to your database for storing custom attributes):

```
npx medusa db:migrate
```


## Key Features:

- Define and manage custom attributes at the category level.  
- Automatically sync category attributes to associated products and manage their values seamlessly.  
- Leverage a flexible structure that supports diverse use cases, including product specifications, category-specific filters, and additional descriptive fields.  

This plugin is particularly valuable for stores that need functionality beyond Medusa’s default product and category fields. It empowers you to extend and customize your catalog, ensuring it aligns with your unique business requirements.
npm package: @linears/react-transition
Description: React transition component.
Author: Hamza Khuswan
Latest version: 1.1.1

# Linears React Transition
Linears React transition component, that can be used easily with [Tailwindcss](https://tailwindcss.com/) 

# Getting Started

## Install

You can install the package using:

```
npm i @linears/react-transition

# Or using yarn

yarn add @linears/react-transition

```

## API

`Transition` takes 3 required props `entering`, `exiting` and `active` and 2 optional props `exited` and `entered`:
- `entering` includes the CSS classes you require the `children` component to transition **from**.
- `exiting` includes the CSS classes you require the `children` component to transition **to**.
- `active` is boolean (false or true value) for initiating the transition.
- `exited` is CSS classes that will be applied when the transition has eneded.
- `entered` is CSS classes that will be applied when the transition has began.

Here is an example:
```jsx
// main.jsx
import "./main.css"

function Example() {
    const [open, setOpen] = useState(false);
    return (
        <div>
            <h1>Example 2</h1>
            <button onClick={() => setOpen(!open)}>Toggle Transition</button>
            <Transition
                active={open}
                entering="opacity-1 transition-fast"
                entered="block"
                exiting="opacity-0 transition-slow"
                exited="hidden"
            >
                <div style={{ background: "#f00" }}>Transition</div>
            </Transition>
        </div>
    );
}
```

```css
// main.css

.opacity-0 {
    opacity: 0;
}
.opacity-1 {
    opacity: 1;
}
.transition-slow {
    transition: transform 2s linear, opacity 2s linear;
}
.transition-fast {
    transition: transform 0.5s linear, opacity 0.5s linear;
}
.block {
    display: block;
}
.hidden {
    display: none;
}
```