open-index/open-npm huggingface dataset:
npm package: @fountainhead/react-json-delta-inspector
Description: Visualize and explore changes to JSON objects generated by 'json-delta', using 'react-inspector'
Author: Fountainhead Technologies Ltd.
Latest version: 1.2.0

# react-json-delta-inspector

Visualize and explore changes to JSON objects generated by `json-delta`, using
`react-inspector`.

[![CircleCI](https://circleci.com/gh/FountainheadTechnologies/react-json-delta-inspector/tree/master.svg?style=svg)](https://circleci.com/gh/FountainheadTechnologies/react-json-delta-inspector/tree/master)

## Installation

For NPM users:

```bash
npm install @fountainhead/react-json-delta-inspector
```

For Yarn users:

```bash
yarn add @fountainhead/react-json-delta-inspector
```

## Usage

This package contains a `<DeltaInspector/>` component, which accepts the
following props:

- `prev` (any): The 'previous' state of some Object or Array
- `delta` (Diff[]): The result of calling `jsonDelta.diff` against `prev` and
  another object.

You will notice that `<DeltaInspector />` does *not* accept a `next` object or
attempt to compute a diff between two objects itself; it is on you, as the user
of this package, to provide the previous state and the delta yourself. Since
computing a delta is potentially an expensive operation, you are far more suited
to manage how and when to compute this delta yourself via `jsonDelta.diff`,
rather than us try to optimise it for you.
npm package: @fountainjs/nuxt
Description: Fountain screenplay parser for Nuxt
Author: Thom Bruce
Latest version: 1.9.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<h1 id="nuxt-fountain" align="center">Nuxt Fountain</h1>

<p align="center"><a href="https://www.patreon.com/thombruce"><img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patron"></a></p>

<p align="center"><a href="https://github.com/thombruce/fountain.js/issues"><img src="https://img.shields.io/github/issues-raw/thombruce/fountain.js?logo=github" alt="GitHub issues"></a></p>

<p align="center"><a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a></p>

<p align="center">A JavaScript based parser for the screenplay format <a href="https://fountain.io/">Fountain</a>.</p>

## Installation

```sh
# With Yarn
yarn add @thombruce/vue-fountain
# With npm
npm install @thombruce/vue-fountain --save
```

### If you're using Nuxt

Add `vue-fountain/nuxt` to `buildModules` in `nuxt.config.js`:

```js
  buildModules: [
    // ...
    "@thombruce/vue-fountain/nuxt",
    // ...
  ],
```

This will make all of Vue Fountain's components available globally, so that you can use them without having to first `import` them. It also adds a custom parser to [Nuxt Content](https://content.nuxtjs.org/) so that you can serve `.fountain` files from your static site.

## Usage

Pass your screenplay as a prop:

```vue
<template>
<!-- The screenplay prop can be a string containing your screenplay or
a JSON object that has already been parsed (if using Nuxt Content) -->
<fountain-screenplay :screenplay='myScreenplay'></fountain-screenplay>
</template>
```

Or as the default slot content:

```vue
<template>
<fountain-screenplay>
INT. MUSIC ROOM - EVENING

CASSANDRA (CONT'D)
(sign language)
What are we going to do?
</fountain-screenplay>
</template>
```

You can also use this component in your Nuxt Content Markdown files, but be careful; you should wrap the interior slot content in `<template></template>` tags to have this behave as expected:

```html
<fountain-screenplay>
<template>
INT. MUSIC ROOM - EVENING

CASSANDRA (CONT'D)
(sign language)
What are we going to do?
</template>
</fountain-screenplay>
```

### Title Pages

By default, Vue Fountain does not show a title page. If your screenplay contains Fountain-formatted title page metadata that you want to display as a title page, you can use the `title` prop:

```vue
<template>
<fountain-screenplay title>
Title: A Silent Musical
Credit: written by
Author: Thom Bruce
Draft Date: 2010-06-06

INT. MUSIC ROOM - EVENING

CASSANDRA (CONT'D)
(sign language)
What are we going to do?
</fountain-screenplay>
</template>
```
npm package: @fourcels/fetch
Description: fetch advance
Author: kiyan
Latest version: 0.2.4

# fetch advance

## Install

```bash
npm install @fourcels/fetch
```

## Usage

### default fetch

```js
import fetch from "@fourcels/fetch";

const { data } = await fetch.GET("https://dummyjson.com/products", {
  limit: 10,
});
console.log(data);
```

### custom fetch

```js
import { Fetch } from "@fourcels/fetch";

const fetcher = new Fetch("https://dummyjson.com", {
  authFunc(headers) {
    headers.append("Authorization", "Bearer token");
  },
  handleError(res, data) {
    console.log(data);
  },
});
const { data } = await fetcher.POST("/products/add", {
  title: "BMW Pencil",
});
console.log(data);
```
npm package: @fourcels/react-image-upload
Description: A image upload component for React
Author: Kiyan
Latest version: 0.7.0

# React Image Upload

[![NPM version][npm-image]][npm-url]

A image upload component for React

Visit [react-image-upload](https://fourcels.github.io/react-image-upload/) to view the documentation and examples.

## Getting Started

### Install

```bash
pnpm add @fourcels/react-image-upload
```

### Basic Usage

```jsx
import { ImageUpload } from "@fourcels/react-image-upload";
import "@fourcels/react-image-upload/style.css";

function MyApp() {
  return <ImageUpload />;
}
```

[npm-image]: https://img.shields.io/npm/v/@fourcels/react-image-upload.svg?style=for-the-badge&labelColor=000000
[npm-url]: https://www.npmjs.com/package/@fourcels/react-image-upload

## Acknowledgments

- [react-dropzone](https://github.com/react-dropzone/react-dropzone)
- [react-photo-view](https://github.com/MinJieLiu/react-photo-view)
npm package: @fourcels/vite-plugin-react-pages
Description: File system base react-router plugin for Vite
Author: kiyan
Latest version: 0.5.1

# vite-plugin-react-pages

> File system routing for React applications base
> [react-router](https://github.com/remix-run/react-router),
> [vite](https://github.com/vitejs/vite)

## Getting Started

### Install

```bash
pnpm add @fourcels/vite-plugin-react-pages react-router react-router-dom
```

### Vite config

Add to your `vite.config.js`:

```ts
import pages from "@fourcels/vite-plugin-react-pages";

export default {
  plugins: [
    // ...
    pages(),
  ],
};
```

## Overview

By default a page is a
[React Router lazy component](https://reactrouter.com/en/main/route/lazy)
exported from a `.tsx`, `.jsx`, `.ts`, `.js` file in the `src/pages` directory.

You can access the generated routes by importing the `~pages` module in your
application.

```tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import routes from "~pages";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={createBrowserRouter(routes)} />
  </React.StrictMode>,
);
```

**Type**

```ts
// vite-env.d.ts
/// <reference types="@fourcels/vite-plugin-react-pages/client" />
```

## Route Style

- `layout.{tsx,jsx,ts,js}` => layout page
- `page.{tsx,jsx,ts,js}` => index page
- `404.{tsx,jsx,ts,js}` => not found page
- `_lib` => private folder (underscore prefix)
- `(layout)` =>
  [Layout Routes](https://reactrouter.com/en/main/route/route#layout-routes)
- `[id]` => `:id`
  [Dynamic Segments](https://reactrouter.com/en/main/route/route#dynamic-segments)
- `[[id]]` => `:id?`
  [Optional Segments](https://reactrouter.com/en/main/route/route#optional-segments)
- `[...slug]` => `*`
  [Splats](https://reactrouter.com/en/main/route/route#splats)
- `{task}` => `task?`
  [Optional Static Segments](https://reactrouter.com/en/main/route/route#dynamic-segments)

**Example:**

[exmaple](/src/pages)

```bash
# folder structure
src/pages/
├── (dashboard)
│   ├── [...slug]
│   │   └── page.tsx
│   ├── posts
│   │   ├── [id]
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── about
│   └── [[lang]]
│       └── page.tsx
├── 404.tsx
├── layout.tsx
└── page.tsx
```
npm package: @fourdigit/editorconfig-config-fourdigit
Description: EdigorConfig shareable config for FOURDIGIT developers
Author: fourdigit
Latest version: 1.0.1

# Sharable EditorConfig for FOURDIGIT

[![npm](https://img.shields.io/npm/v/@fourdigit/editorconfig-config-fourdigit.svg)](https://www.npmjs.com/package/@fourdigit/editorconfig-config-fourdigit)

## Installation

```sh
// yarn
yarn add --dev @fourdigit/editorconfig-config-fourdigit

// npm
npm install --save-dev @fourdigit/editorconfig-config-fourdigit
```

## Usage

EditorConfig doesn't natively support sharing or extending configuration (see https://github.com/editorconfig/editorconfig/issues/236).
As a stop-gap, we adopt postinstall script.
Automatically install the file .editorconfig if your project not contain it.

## Update .editorconfig

When you want to update your editorconfig manually, please run following command.

```sh
cp ./node_modules/@fourdigit/editorconfig-config-fourdigit/.editorconfig .editorconfig
```
npm package: @fourdigit/eslint-config-fourdigit
Description: ESLint shareable config for FOURDIGIT developers
Author: fourdigit
Latest version: 3.0.0-alpha1

# ESLint Sharable Config for FOURDIGIT


[![npm](https://img.shields.io/npm/v/@fourdigit/eslint-config-fourdigit.svg)](https://www.npmjs.com/package/@fourdigit/eslint-config-fourdigit)
[![Build Status](https://travis-ci.org/fourdigit/eslint-config-fourdigit.svg?branch=master)](https://travis-ci.org/fourdigit/eslint-config-fourdigit)
[![Greenkeeper badge](https://badges.greenkeeper.io/fourdigit/eslint-config-fourdigit.svg)](https://greenkeeper.io/)

This package is sharable config of ESLint used in the FOURDIGIT project.

## Installation

```
// npm
$ npm install --save-dev @fourdigit/eslint-config-fourdigit

// yarn
$ yarn add --dev @fourdigit/eslint-config-fourdigit
```

## Usage

### Base + ES2018 + React

ES2018 + Reactのコードベース用設定ファイルです。
プロジェクトの`.eslintrc`に以下のように記述してください。

```
{
  "root": true,
  "extends": ["@fourdigit/eslint-config-fourdigit"]
}
```

### Base + ES2018

ES2018のコードベース用設定ファイルです。
プロジェクトの`.eslintrc`に以下のように記述してください。

```
{
  "root": true,
  "extends": ["@fourdigit/eslint-config-fourdigit/esnext"]
}
```

ES2018以前のECMAScriptのバージョンを使用する場合は、以下のような記述もしてください。

```
{
  parserOptions: {
    ecmaVersion: 2015
  }
}
```

### Base

ES5のコードベース用設定ファイルです。
プロジェクトの`.eslintrc`に以下のように記述してください。

```
{
  "root": true,
  "extends": ["@fourdigit/eslint-config-fourdigit/base"]
}
```

## Prettier

プロジェクト内で`.prettierrc.js`を用意して、以下のように記述をしてください。

```
module.exports = require('@fourdigit/eslint-config-fourdigit/.prettierrc.js')
```
npm package: @fourdigit/sasslint-config-fourdigit
Description: SassLint shareable config
Author: FOURDIGIT DESIGN DEVELOP TEAM
Latest version: 1.0.3

# SassLint Config

> SassLint [shareable config](https://github.com/sasstools/sass-lint#sass-lint-----)

## Install

```bash
npm install --save-dev @fourdigit/sasslint-config-fourdigit
```

## Usage

> SassLint [configuration](https://github.com/sasstools/sass-lint#configuring)

Add some SassLint config to your `.sass-lint.yml`:

```yaml
options:
  config-file: ./node_modules/@fourdigit/sasslint-config-fourdigit/config.yml
```

## Usage direct on command line

```bash
sass-lint --config ./node_modules/@fourdigit/sasslint-config-fourdigit/config.yml
```

> **Note:** It is not necessary to create the `.sass-lint.yml` file.
npm package: @fourdigit/scss-utilities
Description: [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url]
Author: FOURDIGIT Inc.
Latest version: 1.0.0

# scss-utilities

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url]

Fourdigitのプロジェクトで使用するSCSSのユーティリティ集です。


[npm-image]: https://img.shields.io/npm/v/@fourdigit/scss-utilities.svg
[npm-url]: https://www.npmjs.com/package/@fourdigit/scss-utilities

[travis-image]: https://travis-ci.com/fourdigit/scss-utilities.svg?branch=master
[travis-url]: https://travis-ci.com/fourdigit/scss-utilities


https://github.com/fourdigit/scss-utilities/blob/master/utilities.scss のコメントに使い方を記載しています。
npm package: @fourdigit/stylelint-config-fourdigit
Description: The shareable stylelint config for Fourdigit production.
Author: FOURDIGIT Inc.
Latest version: 5.0.0

# @fourdigit/stylelint-config-fourdigit

[![GitHub license](https://img.shields.io/github/license/fourdigit/stylelint-config-fourdigit)](https://github.com/fourdigit/stylelint-config-fourdigit/blob/master/LICENSE)

> The shareable stylelint config for Fourdigit production.

Extends

- [`stylelint-config-standard-scss`](https://github.com/stylelint-scss/stylelint-config-standard-scss)
- [`stylelint-config-recess-order`](https://github.com/stormwarning/stylelint-config-recess-order)

Plugins

- [`@stylistic/stylelint-plugin`](https://github.com/stylelint-stylistic/stylelint-stylistic)

## Requirements

- Node.js >= 18.12.0
- stylelint >= 16.8.0

## Installation

```bash
# peerDependencies
npm i -D stylelint stylelint-config-standard-scss stylelint-config-recess-order @stylistic/stylelint-plugin

npm i -D @fourdigit/stylelint-config-fourdigit
```

## Usage

If you've installed `@fourdigit/stylelint-config-fourdigit` locally within your project, just set your stylelint config to:

`.stylelintrc.json`

```json
{
  "extends": "@fourdigit/stylelint-config-fourdigit"
}
```

`stylelint.config.js`

```js
module.exports = {
  extends: ["@fourdigit/stylelint-config-fourdigit"],
};
```

## Using on Vscode extension

If you use [`vscode-stylelint`](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint#migrating-from-vscode-stylelint-0.xstylelint-13.x) extension.
Add options on workspace or user settings

`.vscode/settings.json`

```json
{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss"]
}
```

## Migration from v4.x

v5.0.0 upgrades to stylelint 16 and introduces breaking changes:

### Breaking Changes

1. **Node.js requirement**: >= 18.12.0
2. **stylelint version**: >= 16.8.0
3. **New peer dependency**: `@stylistic/stylelint-plugin` is now required
4. **Removed**: `stylelint-config-prettier` (no longer needed)
5. **Removed rule**: `selector-no-qualifying-type` (removed from stylelint)

### Stylistic Rules

Stylistic rules (indentation, quotes, spacing, etc.) have been migrated to `@stylistic/stylelint-plugin`. The behavior remains the same.

### Update Steps

```bash
# Remove old packages
npm uninstall stylelint-config-prettier

# Update peer dependencies
npm i -D stylelint@^16.8.0 stylelint-config-standard-scss@^13.0.0 stylelint-config-recess-order@^4.6.0 @stylistic/stylelint-plugin@^3.0.0

# Update this package
npm i -D @fourdigit/stylelint-config-fourdigit@^5.0.0
```