open-index/open-npm huggingface dataset:
npm package: @ferdydh/d3-org-chart
Description: Highly customizable org chart, created with d3
Latest version: 0.2.7


# Customizable organization chart, based on d3 v7

<span class="badge-npmversion">
     <a href="https://www.npmjs.com/package/@ferdydh/d3-org-chart" title="View this project on NPM">
          <img src="https://img.shields.io/npm/v/@ferdydh/d3-org-chart.svg" alt="NPM version" />
     </a>
</span>

This repo is a fork from [d3-org-chart](https://github.com/bumbeishvili/org-chart/) by David B([twitter](https://twitter.com/dbumbeishvili) and [LinkedIn](https://www.linkedin.com/in/bumbeishvili/)). Our ultimate goal is to integrate typescript and react natively into the library, fix reported issues, improve customization, and provide better documentation.



### Installing

```
npm i @ferdydh/d3-org-chart
```

```jsx
import { OrgChart } from '@ferdydh/d3-org-chart';

type Props = {
     data: DataType[]
}

type DataType = {
     id: string | number // required property
     parentId: string | number // required property
}

export const OrgChartComponent = ({ data }: Props) => {
  const container = useRef(null);

  useEffect(() => {
    if (fields && container.current) {
      const chart = new OrgChart<DataType>()
        .container(container.current)
        .data(fields)
        .render();
    }
  }, [fields, container.current]);

  return (
    <div>
      <div ref={container} />
    </div>
  );
};
```


#### Featured:

Custom components & algorithms used

- [Curved edges - vertical](https://observablehq.com/@bumbeishvili/curved-edges-compacty-vertical)
- [Curved edges - horizontal](https://observablehq.com/@bumbeishvili/curved-edges-compact-horizontal)
- [Flextree Algorithm](https://github.com/Klortho/d3-flextree)


## Author

Ferdy DH
npm package: @fereactproject/react-data-grid-no-style
Description: Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like
Author: FM
Latest version: 1.0.6

# react-data-grid

> The core of react-data-grid


## Install

```sh
npm install --save react-data-grid
```

## Usage

```sh
import ReactDataGrid from 'react-data-grid';

const columns = [{ key: 'id', name: 'ID' }, { key: 'title', name: 'Title' }];
const rows = [{ id: 1, title: 'Title 1' }, ...];
const rowGetter = rowNumber => rows[rowNumber];

const Grid = () => {
  return <ReactDataGrid
    columns={columns}
    rowGetter={rowGetter}
    rowsCount={rows.length}
    minHeight={500} />);
}
```

## Exports
Asside from the grid this package exports:

name                   | source                                  |
-----------------------|-----------------------------------------|
RowComparer            | [RowComparer](./src/RowComparer.js)     |
RowsContainer          | [RowsContainer](./src/RowsContainer.js) |
Row                    | [Row](./src/Row.js)                     |
Cell                   | [Cell](./src/Cell.js)                   |
HeaderCell             | [HeaderCell](./src/HeaderCell.js)       |
editors                | [Editors](./src/editors)                |
formatters             | [Formatters](./src/formatters)          |
shapes                 | [shapes](./src/PropTypeShapes)          |
_constants             | [_constants](./src/AppConstants.js)     |
_helpers               | [_helpers](./src/helpers)               |
npm package: @fereai/sdk
Description: TypeScript SDK for the FereAI Gateway API
Author: Fere AI
Latest version: 0.3.0

# @fere/sdk

TypeScript SDK for the FereAI Gateway API.

## Install

```bash
npm install @fere/sdk
```

## Usage

```typescript
import { FereClient } from "@fere/sdk";

const client = new FereClient({ apiKey: "your-api-key", baseUrl: "https://api.fere.ai" });
```

See the [FereAI docs](https://api.fere.ai) for full API reference.
npm package: @feremabraz/run-in-parallel
Description: A modern CLI to run multiple commands concurrently with beautiful output
Author: Fernando Braz
Latest version: 1.0.4

# run-in-parallel

Run multiple commands in parallel with clean output.

## Installation

```bash
# Local installation (recommended)
npm install --save-dev run-in-parallel
# or
pnpm add -D run-in-parallel

# Global installation (optional)
npm install -g run-in-parallel
```

## Usage

```bash
# With npm/pnpm (local installation)
npx run-in-parallel 'command1' 'command2' 'command3'
pnpm exec run-in-parallel 'command1' 'command2' 'command3'

# Global installation
run-in-parallel 'command1' 'command2' 'command3'
```

### Examples

```bash
# Basic usage
npx run-in-parallel 'echo "First"' 'echo "Second"' 'sleep 2 && echo "Third"'

# Development workflow
npx run-in-parallel 'npm run watch-js' 'npm run watch-css' 'npm run dev-server'

# Don't kill others on failure
npx run-in-parallel --no-kill-others 'npm test' 'npm run lint'

# With timestamps
npx run-in-parallel --timestamps 'echo "First"' 'echo "Second"'

# With pnpm (same functionality)
pnpm exec run-in-parallel 'npm run build-js' 'npm run build-css'
```

### In package.json

```json
{
  "scripts": {
    "start": "run-in-parallel 'node server.js' 'tailwindcss --watch'",
    "dev": "run-in-parallel 'vite dev' 'tsc --watch --noEmit'"
  },
}
```

Run with `npm run dev` or `pnpm dev`.

## Options

| Option | Alias | Default | Description |
|--------|-------|---------|-------------|
| `--kill-others` | `-k` | `true` | Kill other processes when one fails |
| `--prefix-colors` | `-c` | `["red", "green", "blue", "yellow", "magenta", "cyan"]` | Colors for command prefixes |
| `--timestamps` | `-t` | `false` | Add timestamps to output |
| `--help` | | | Show help |
npm package: @ferenci84/next
Description: The React Framework
Latest version: 11.0.1-iocharts-1

<p align="center">
  <a href="https://nextjs.org">
    <img src="https://assets.vercel.com/image/upload/v1607554385/repositories/next-js/next-logo.png" height="128">
    <h1 align="center">Next.js</h1>
  </a>
</p>

<p align="center">
  <a aria-label="Vercel logo" href="https://vercel.com">
    <img src="https://img.shields.io/badge/MADE%20BY%20Vercel-000000.svg?style=for-the-badge&logo=Vercel&labelColor=000">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/next">
    <img alt="" src="https://img.shields.io/npm/v/next.svg?style=for-the-badge&labelColor=000000">
  </a>
  <a aria-label="License" href="https://github.com/vercel/next.js/blob/canary/license.md">
    <img alt="" src="https://img.shields.io/npm/l/next.svg?style=for-the-badge&labelColor=000000">
  </a>
  <a aria-label="Join the community on GitHub" href="https://github.com/vercel/next.js/discussions">
    <img alt="" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&logo=Next.js&labelColor=000000&logoWidth=20">
  </a>
</p>

## Getting Started

Visit <a aria-label="next.js learn" href="https://nextjs.org/learn">https://nextjs.org/learn</a> to get started with Next.js.

## Documentation

Visit [https://nextjs.org/docs](https://nextjs.org/docs) to view the full documentation.

## Who is using Next.js?

Next.js is used by the world's leading companies. Check out the [Next.js Showcase](https://nextjs.org/showcase) to learn more.

## Community

The Next.js community can be found on [GitHub Discussions](https://github.com/vercel/next.js/discussions), where you can ask questions, voice ideas, and share your projects.

To chat with other community members you can join the [Next.js Discord](https://nextjs.org/discord).

Our [Code of Conduct](https://github.com/vercel/next.js/blob/canary/CODE_OF_CONDUCT.md) applies to all Next.js community channels.

## Contributing

Please see our [contributing.md](/contributing.md).

### Good First Issues

We have a list of [good first issues](https://github.com/vercel/next.js/labels/good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.

## Authors

- Tim Neutkens ([@timneutkens](https://twitter.com/timneutkens)) – [Vercel](https://vercel.com/about/timneutkens)
- Naoyuki Kanezawa ([@nkzawa](https://twitter.com/nkzawa)) – [Vercel](https://vercel.com/about/nkzawa)
- Guillermo Rauch ([@rauchg](https://twitter.com/rauchg)) – [Vercel](https://vercel.com/about/rauchg)
- Arunoda Susiripala ([@arunoda](https://twitter.com/arunoda))
- Tony Kovanen ([@tonykovanen](https://twitter.com/tonykovanen))
- Dan Zajdband ([@impronunciable](https://twitter.com/impronunciable))
npm package: @ferfalk/prettier-config
Description: Shared Prettier configuration
Author: Fernando A. H. Falkiewicz
Latest version: 1.1.0

# @ferfalk/prettier-config

Shared [Prettier](https://github.com/prettier/prettier) configuration.

## Installation

```bash
npm install --save-dev @ferfalk/prettier-config
```

## Usage

Add the **prettier** property on **package.json**:

```json
{
  "prettier": "@ferfalk/prettier-config"
}
```

### Or

Create a **.prettierrc** file with a string:

```
"@ferfalk/prettier-config"
```

### Or

To extend the configuration, create a **.prettierrc.js** file:

```js
import config from '@ferfalk/prettier-config';

export default {
  ...config,
  singleQuote: false,
};
```

## License

[MIT](https://github.com/Ferfalk/prettier-config/blob/main/LICENSE)