open-index/open-npm huggingface dataset:
npm package: @glyph-cat/eslint-config
Description: ### Mandatory * `eslint` — `>=9` * `globals` — `>=14`
Author: glyph-cat
Latest version: 1.0.1-alpha.15

## Requirements

### Mandatory
* `eslint` — `>=9`
* `globals` — `>=14`

### Optional
* `eslint-plugin-react` — `7.34.2`
* `eslint-plugin-react-hooks` — `4.6.2`
* `eslint-plugin-jest` — `28.6.0`

## Installation

### Standard
```sh
yarn add -D @glyph-cat/eslint-config
```

### Jest
```sh
yarn add -D @glyph-cat/eslint-config eslint-plugin-jest
```

### React
```sh
yarn add -D @glyph-cat/eslint-config eslint-plugin-react eslint-plugin-react-hooks
```

### Everything (for easy of copy)
```sh
yarn add -D @glyph-cat/eslint-config eslint-plugin-jest eslint-plugin-react eslint-plugin-react-hooks
```

## Usage

### Normal

```js
const { recommended as baseRecommended } = require('@glyph-cat/eslint-config/base')
const { recommended as jestRecommended } = require('@glyph-cat/eslint-config/jest')
const { recommended as reactRecommended } = require('@glyph-cat/eslint-config/react')

module.exports = [
  ...baseRecommended,
  ...jestRecommended, // optional, for projects that uses Jest
  ...reactRecommended, // optional, for React projects
]

```

### Library Authoring

```js
const { libraryAuthoring as baseLibraryAuthoring } = require('@glyph-cat/eslint-config/base')
const { libraryAuthoring as jestLibraryAuthoring } = require('@glyph-cat/eslint-config/jest')
const { libraryAuthoring as reactLibraryAuthoring } = require('@glyph-cat/eslint-config/react')

module.exports = [
  ...baseLibraryAuthoring,
  ...jestLibraryAuthoring, // optional, but libraries should be adequately tested to begin with
  ...reactLibraryAuthoring, // optional, for React-based libraries
]

```

## Troubleshooting

### Key "globals": Global "AudioWorkletGlobalScope " has leading or trailing whitespace.

Solution: Run `yarn why globals` to check the version. Make sure the version of [globals](https://www.npmjs.com/package/globals) is at least v14.X.X. The package can be updated to the latest version by running `yarn upgrade global@latest`.

### context.getAncestors is not a function ... Rule: "react/jsx-no-bind"

The `eslint-plugin-react` installed might be an old version, run `yarn upgrade eslint-plugin-react@latest` and the problem should be resolved. Working version of `eslint-plugin-react` is `7.34.2` at the time of writing.

### context.getSource is not a function ... Rule: "react-hooks/rules-of-hooks"

For the time being, install the `rc` version by running `yarn upgrade eslint-plugin-react@rc` to resolve the problem. (written as of 09 June 2024)
npm package: @glyphjs/compiler
Description: Compiles Glyph AST into IR with schema validation and diagnostics
Author: Vledic Franco
Latest version: 0.9.1

# @glyphjs/compiler

Compiles Glyph markdown into a validated IR (Intermediate Representation) with schema validation and diagnostics.

## Install

```bash
pnpm add @glyphjs/compiler
```

## Usage

```ts
import { compile } from '@glyphjs/compiler';

const markdown = `
# My Document

\`\`\`ui:graph
nodes:
  - id: a
    label: Start
edges:
  - from: a
    to: b
\`\`\`
`;

const result = compile(markdown);
// result.ir       -- the compiled GlyphIR document
// result.diagnostics -- any warnings or errors
```

## API

- `compile(markdown, options?)` -- end-to-end markdown-to-IR compilation
- `translateNode(node, context)` -- convert a single AST node to IR blocks
- `extractAllInlineReferences(ir)` -- extract cross-block references
- `compileContainerBlocks(blocks)` -- compile nested container structures
- `createDiagnostic(...)` -- helper for building diagnostic objects

## Docs

https://github.com/VledicFranco/glyphjs
npm package: @glyphjs/components
Description: Built-in UI components for Glyph JS (graph, table, chart, etc.)
Author: Vledic Franco
Latest version: 0.9.1

# @glyphjs/components

Built-in UI components for Glyph JS: graphs, tables, charts, timelines, and more.

## Install

```bash
pnpm add @glyphjs/components react react-dom
```

## Usage

```tsx
import { graphDefinition, tableDefinition } from '@glyphjs/components';
import { createGlyphRuntime } from '@glyphjs/runtime';

const runtime = createGlyphRuntime();

// Register built-in components
runtime.register(graphDefinition);
runtime.register(tableDefinition);
```

### Using components directly

```tsx
import { Graph, Table, Chart } from '@glyphjs/components';

<Graph
  data={{
    nodes: [{ id: 'a', label: 'Node A' }],
    edges: [{ from: 'a', to: 'b' }],
  }}
/>;
```

## Available components

| Component  | Description                                       |
| ---------- | ------------------------------------------------- |
| `Graph`    | Directed graph with dagre and force layouts       |
| `Table`    | Data table with headers and rows                  |
| `Chart`    | Bar, line, and area charts via D3                 |
| `Relation` | Entity-relationship diagrams                      |
| `Timeline` | Chronological event timelines                     |
| `Callout`  | Callout / admonition blocks (info, warning, etc.) |
| `Tabs`     | Tabbed content panels                             |
| `Steps`    | Step-by-step instructional sequences              |

## Docs

https://github.com/VledicFranco/glyphjs
npm package: @glyphjs/ir
Description: IR utilities: validation, diffing, patching, migration
Author: Vledic Franco
Latest version: 0.9.1

# @glyphjs/ir

IR (Intermediate Representation) utilities for Glyph JS: validation, diffing, patching, and migration.

## Install

```bash
pnpm add @glyphjs/ir
```

## Usage

```ts
import { validateIR, diffIR, applyPatch, createEmptyIR } from '@glyphjs/ir';

// Create a blank document
const doc = createEmptyIR();

// Validate an IR document
const diagnostics = validateIR(doc);

// Diff two IR documents
const patch = diffIR(oldDoc, newDoc);

// Apply a patch
const updated = applyPatch(oldDoc, patch);
```

## API

- `validateIR(ir)` -- validate an IR document and return diagnostics
- `diffIR(a, b)` -- compute a patch that transforms `a` into `b`
- `applyPatch(ir, patch)` -- apply a patch to an IR document
- `composePatch(a, b)` -- compose two patches into one
- `registerMigration(migration)` / `migrateIR(ir)` -- version migration support
- `generateBlockId()` / `generateDocumentId()` -- deterministic ID generation
- `createEmptyIR()` -- factory for a blank IR document

## Docs

https://github.com/VledicFranco/glyphjs
npm package: @glyphjs/parser
Description: Markdown parser with remark plugin for ui: fenced blocks
Author: Vledic Franco
Latest version: 0.9.1

# @glyphjs/parser

Markdown parser with a remark plugin for `ui:` fenced code blocks.

## Install

```bash
pnpm add @glyphjs/parser
```

## Usage

```ts
import { parseGlyphMarkdown } from '@glyphjs/parser';

const markdown = `
# Hello

\`\`\`ui:graph
nodes:
  - id: a
    label: Node A
edges:
  - from: a
    to: b
\`\`\`
`;

const ast = parseGlyphMarkdown(markdown);
```

### Using the remark plugin directly

```ts
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import { remarkGlyph } from '@glyphjs/parser';

const processor = unified().use(remarkParse).use(remarkGlyph);
const tree = processor.parse(markdown);
```

## Docs

https://github.com/VledicFranco/glyphjs
npm package: @glyphjs/runtime
Description: React-based rendering runtime for Glyph JS IR
Author: Vledic Franco
Latest version: 0.9.1

# @glyphjs/runtime

React rendering engine for Glyph JS IR documents.

## Install

```bash
pnpm add @glyphjs/runtime react react-dom
```

## Usage

```tsx
import { createGlyphRuntime } from '@glyphjs/runtime';
import { compile } from '@glyphjs/compiler';

const runtime = createGlyphRuntime();
const { ir } = compile(markdown);

function App() {
  return <runtime.Document ir={ir} />;
}
```

### Theming

```tsx
import { ThemeProvider, darkTheme } from '@glyphjs/runtime';

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <runtime.Document ir={ir} />
    </ThemeProvider>
  );
}
```

## Key exports

- `createGlyphRuntime()` -- create a runtime instance with a `Document` component
- `GlyphDocument` -- standalone document renderer
- `BlockRenderer` -- renders individual IR blocks
- `ThemeProvider` / `useGlyphTheme` -- theme system with light and dark presets
- `LayoutProvider` / `DocumentLayout` / `DashboardLayout` / `PresentationLayout` -- layout engines
- `ComponentRegistry` / `PluginRegistry` -- component registration and plugin system
- `ErrorBoundary` / `FallbackRenderer` -- graceful error handling
- `RuntimeProvider` / `useRuntime` / `useReferences` -- React context and hooks

## Docs

https://github.com/VledicFranco/glyphjs
npm package: @glyphjs/schemas
Description: Zod schemas for Glyph JS components with JSON Schema generation
Author: Vledic Franco
Latest version: 0.9.1

# @glyphjs/schemas

Zod schemas for Glyph JS UI components with automatic JSON Schema generation.

## Install

```bash
pnpm add @glyphjs/schemas
```

## Usage

```ts
import { graphSchema, tableSchema, getJsonSchema } from '@glyphjs/schemas';

// Validate component data at runtime
const result = graphSchema.safeParse({
  nodes: [{ id: 'a', label: 'Node A' }],
  edges: [{ from: 'a', to: 'b' }],
});

// Generate JSON Schema for any component
const jsonSchema = getJsonSchema('graph');
```

## Available schemas

| Schema           | Component                    |
| ---------------- | ---------------------------- |
| `graphSchema`    | Directed graphs / flowcharts |
| `tableSchema`    | Data tables                  |
| `chartSchema`    | Bar, line, and area charts   |
| `relationSchema` | Entity-relationship diagrams |
| `timelineSchema` | Chronological timelines      |
| `calloutSchema`  | Callout / admonition blocks  |
| `tabsSchema`     | Tabbed content panels        |
| `stepsSchema`    | Step-by-step sequences       |

## Docs

https://github.com/VledicFranco/glyphjs
npm package: @glyphjs/types
Description: Shared TypeScript type definitions for Glyph JS
Author: Vledic Franco
Latest version: 0.9.1

# @glyphjs/types

Shared TypeScript type definitions for the Glyph JS ecosystem.

## Install

```bash
pnpm add @glyphjs/types
```

## Usage

```ts
import type { GlyphIR, Block, CompilationResult } from '@glyphjs/types';

const doc: GlyphIR = {
  version: '0.1',
  documentId: 'doc-1',
  metadata: { title: 'Hello' },
  blocks: [],
  references: [],
};
```

## What's included

- **IR types** -- `GlyphIR`, `Block`, `Reference`, `CompilationResult`, and related interfaces
- **AST types** -- `GlyphRoot`, `GlyphUIBlock`, `RawRef` for the parsed markdown AST
- **Block data types** -- `HeadingData`, `ParagraphData`, `CodeData`, `ListData`, and more
- **Patch types** -- `GlyphPatch`, `GlyphPatchOperation` for IR diffing/patching
- **Runtime types** -- `GlyphRuntime`, `GlyphTheme`, `BlockProps`, `GlyphRuntimeConfig`
- **Plugin types** -- `GlyphComponentDefinition`, `GlyphComponentProps`

## Docs

https://github.com/VledicFranco/glyphjs
npm package: @glypho/cli
Description: CLI tool for validating, converting, and rendering .g graph notation files
Author: glypho-dev
Latest version: 0.1.4

# @glypho/cli

Command-line tool for [Glypho](https://glypho.dev) (`.g`) — validate, render, and convert graph diagrams.

## Install

```bash
npm install -g @glypho/cli
```

## Commands

### Validate

```bash
glypho check diagram.g              # human-readable validation
glypho check diagram.g --json       # machine-readable output
```

### Render

```bash
glypho render diagram.g             # → diagram.svg
glypho render diagram.g -f png      # → diagram.png
glypho render diagram.g -o out.svg  # custom output path
glypho render flow.mmd              # Mermaid input → SVG
glypho render graph.dot -f png      # DOT input → PNG
glypho render diagram.g --width 800 --height 600
glypho render diagram.g -f png --scale 3
glypho render diagram.g -f png -b transparent  # transparent PNG (default is white)
glypho render diagram.g -b '#eee'              # SVG with background color
```

### Preview

```bash
glypho render diagram.g -o diagram.svg
glypho preview diagram.svg          # open an existing SVG in browser
glypho preview diagram.svg --force  # allow GUI side effects in CI/non-interactive runs
```

### Convert

```bash
# .g → text formats
glypho to mermaid diagram.g         # print Mermaid to stdout

# other formats → .g
glypho from mermaid flow.mmd        # print .g to stdout
glypho from dot graph.dot           # print .g to stdout
```

### Inspect

```bash
glypho parse diagram.g              # print JSON AST
glypho parse diagram.g --compact    # minified JSON
glypho info diagram.g               # stats + token comparison
glypho info diagram.g --json        # machine-readable stats
```

## Piping

Commands accept `-` for stdin, and if no file is given they read from stdin when input is piped:

```bash
echo 'a > b > c' | glypho check
echo 'a:c A\nb:p B\na > b' | glypho render -o pipe.svg
echo 'a > b' | glypho to mermaid
cat flow.mmd | glypho from mermaid
```

`render` is the only file-producing conversion command. Use `to` / `from` for text format conversion, use `render` for SVG or PNG output, and use `preview` only to open an existing SVG.

## Token Comparison

`glypho info` shows how `.g` compares to other formats:

```
$ glypho info diagram.g

  Nodes: 5  Edges: 5  Groups: 1

  Format        Tokens
  .g                28
  Mermaid           52  (1.9x)
  Graphviz DOT      68  (2.4x)
  JSON Canvas      143  (5.1x)
```

## License

MIT
npm package: @glypho/parser
Description: Lexer and recursive-descent parser for the .g graph notation format
Author: glypho-dev
Latest version: 0.1.4

# @glypho/parser

Parse, convert, and serialize [Glypho](https://glypho.dev) (`.g`) graph notation — an LLM-optimized format for compact flowcharts and directed graphs.

## Install

```bash
npm install @glypho/parser
```

## Quick Start

```ts
import { parse } from '@glypho/parser'

const { graph, errors } = parse(`
  >LR
  idea:c Idea #f90
  ship:p Ship #0af
  idea > ship "let's go"
`)

console.log(graph.nodes)  // [{ id: 'idea', shape: 'c', ... }, { id: 'ship', shape: 'p', ... }]
console.log(graph.edges)  // [{ from: 'idea', to: 'ship', op: '>', label: "let's go" }]
```

## API

### Parse

| Function | Input | Output |
|----------|-------|--------|
| `parse(input)` | `.g` text | `{ graph, errors }` |
| `parseMermaid(input)` | Mermaid flowchart | `{ graph, errors }` |
| `parseDot(input)` | Graphviz DOT | `{ graph, errors }` |

### Serialize

| Function | Input | Output |
|----------|-------|--------|
| `graphToGlypho(graph)` | Graph AST | `.g` text |
| `graphToMermaid(graph)` | Graph AST | Mermaid syntax |
| `graphToDot(graph)` | Graph AST | Graphviz DOT |
| `graphToJsonCanvas(graph)` | Graph AST | JSON Canvas |

### Types

```ts
interface Graph {
  direction?: Direction        // 'LR' | 'TB' | 'RL' | 'BT'
  nodes: Node[]
  edges: Edge[]
  groups: Group[]
  positions: Position[]
  styles: Style[]
}

interface Node {
  id: string
  label?: string
  shape?: Shape                // 'r' | 'd' | 'c' | 'o' | 'p' | 'h'
  color?: string
  classes?: string[]
}

interface Edge {
  from: string
  to: string
  op: EdgeOp                   // '>' | '~' | '=' | '--' | '<>'
  label?: string
  color?: string
}
```

## Format Reference

```
>LR                           // direction: LR, TB, RL, BT
node:c "Label" #f90           // shape + label + color
a > b "label"                 // edge with label
a ~ b                         // dashed edge
a = b                         // thick edge
a -- b                        // undirected
a <> b                        // bidirectional
@group {a b c}                // group nodes
.highlight{a b}              // assign nodes to a class
$:r{fill:#fff}                // style all rects
$.highlight{fill:#ff0}        // style a class
```

**Shapes:** `r` rect, `d` diamond, `c` circle, `o` oval, `p` pill, `h` hexagon

## Mermaid Scope

`parseMermaid()` targets Mermaid **flowcharts**. Unsupported constructs are returned as parse errors instead of being translated lossily.

## License

MIT
npm package: @glyphs/cli
Description: Extract Glyphs icons from Figma
Author: Goran Spasojevic
Latest version: 0.4.0

# Glyphs CLI

Command line interface to synchronize icons from Figma to local project directories.

## Install

```bash
npm install --global @glyphs/cli
```

## Usage

After installing, run `glyphs` to view options available and instructions for using the interfacre

```
   _____ _         _
  |   __| |_ _ ___| |_ ___
  |  |  | | | | . |   |_ -|
  |_____|_|_  |  _|_|_|___|
          |___|_|

  Running @glyphs/cli

  Example usage
    $ glyphs <command> <options>

  Help for a command
    $ glyphs <command> --help
    $ glyphs <command> -h

  Options
    --version, -v Print Glyphs CLI version

  Commands
    add, a        Configure a new icon set
    remove, r     Remove an existing icon set config
    get, g        Get details on the icon set config
    list, l       List configured icon sets
    sync, s       Sync an icon set to the current directory
    preview, p    Preview a local icon set in the browser
    generate      Generate a JS component set
    help, h       Display this message

```
npm package: @glyphs/react-brands
Description: Glyphs React Brands
Latest version: 0.0.8

```bash
npm i @glyphs/react-brands
```

```js
import React from 'react'
import { BrandsFigma } from '@glyphs/react-brands'

class Component extends React.Component {
  render() {
    return (
      <>
        <BrandsFigma variant='color' size='200'></BrandsFigma>
      </>
    )
  }
}
```
npm package: @glyphs/react-core
Description: Glyphs React Core
Latest version: 0.0.8

```bash
npm i @glyphs/react-core
```

```js
import React from 'react'
import { CoreHeart } from '@glyphs/react-core'

class Component extends React.Component {
  render() {
    return (
      <>
        <CoreHeart variant='path' strtokeWidth='6'></CoreHeart>
      </>
    )
  }
}
```
npm package: @glyphs/react-flags
Description: Glyphs React Flags
Latest version: 0.0.8

```bash
npm i @glyphs/react-flags
```

```js
import React from 'react'
import { FlagsCanada } from '@glyphs/react-flags'

class Component extends React.Component {
  render() {
    return (
      <>
        <FlagsCanada variant='circle' rotate='15'></FlagsCanada>
      </>
    )
  }
}
```
npm package: @glyphs/vue-brands
Description: Glyphs Vue Brands
Latest version: 0.0.8

```bash
npm i @glyphs/vue-brands
```

```vue
<template>
  <div id="app">
    <BrandsFigma variant="color" size="200"></BrandsFigma>
  </div>
</template>

<script>
import { BrandsFigma } from '@glyphs/vue-brands'

export default {
  name: 'App',
  components: {
    BrandsFigma
  }
}
</script>
```

```js
import Vue from 'vue'
import App from './App'
import Brands from '@glyphs/vue-brands'

Vue.use(Brands)

new Vue({
  el: '#app',
  render: h => h(App),
})
```
npm package: @glyphs/vue-core
Description: Glyphs Vue Core
Latest version: 0.0.8

```bash
npm i @glyphs/vue-core
```

```vue
<template>
  <div id="app">
    <CoreHeart variant="path" stroke-width="6"></CoreHeart>
  </div>
</template>

<script>
import { CoreHeart } from '@glyphs/vue-core'

export default {
  name: 'App',
  components: {
    CoreHeart
  }
}
</script>
```

```js
import Vue from 'vue'
import App from './App'
import Core from '@glyphs/vue-core'

Vue.use(Core)

new Vue({
  el: '#app',
  render: h => h(App),
})
```
npm package: @glyphs/vue-flags
Description: Glyphs Vue Flags
Latest version: 0.0.8

```bash
npm i @glyphs/vue-flags
```

```vue
<template>
  <div id="app">
    <FlagsCanada variant='circle' rotate='15'></FlagsCanada>
  </div>
</template>

<script>
import { FlagsCanada } from '@glyphs/vue-flags'

export default {
  name: 'App',
  components: {
    FlagsCanada
  }
}
</script>
```

```js
import Vue from 'vue'
import App from './App'
import Flags from '@glyphs/vue-flags'

Vue.use(Flags)

new Vue({
  el: '#app',
  render: h => h(App),
})
```
npm package: @glyphs/wc-brands
Description: Glyphs Web Components Brands
Latest version: 0.0.8

```bash
npm i @glyphs/wc-brands
```

```html
<!DOCTYPE html>
<html>
    <head>
        <title>Empty project</title>
        <meta charset="utf-8">
        <script src="https://unpkg.com/@glyphs/wc-brands" type="module" ></script>
    </head>
    <body>
        <brands-figma variant="color" size="200"></brands-figma>
    </body>
</html>

```
npm package: @glyphs/wc-core
Description: Glyphs Web Components Core
Latest version: 0.0.8

```bash
npm i @glyphs/wc-core
```

```html
<!DOCTYPE html>
<html>
    <head>
        <title>Empty project</title>
        <meta charset="utf-8">
        <script src="https://unpkg.com/@glyphs/wc-core" type="module" ></script>
    </head>
    <body>
        <core-heart variant="path" stroke-width="6"></core-heart>
    </body>
</html>

```
npm package: @glyphs/wc-flags
Description: Glyphs Web Components Flags
Latest version: 0.0.8

```bash
npm i @glyphs/wc-flags
```

```html
<!DOCTYPE html>
<html>
    <head>
        <title>Empty project</title>
        <meta charset="utf-8">
        <script src="https://unpkg.com/@glyphs/wc-flags" type="module" ></script>
    </head>
    <body>
        <flags-canada variant="circle" rotate="15"></flags-canada>
    </body>
</html>

```
npm package: @glyw/react-native-tabbed-section-list
Description: React Native Tabbed SectionList.
Author: Okan Fidan
Latest version: 0.0.21

# @glyw/react-native-tabs-section-list
[![npm version](https://badge.fury.io/js/@glyw%2Freact-native-tabbed-section-list.svg)](https://github.com/okanfidan/react-native-tabbed-section-list)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/okanfidan/react-native-tabbed-section-list/blob/master/LICENSE)

React Native Scrollable Tabbed SectionList.

## Installation

```bash
$ yarn add @glyw/react-native-tabbed-section-list
```

## Demo

<img src="https://raw.githubusercontent.com/okanfidan/assets/master/demo.gif" width="360">

## Props

 Name | Description | Type | Default
------ | ------ | ------ | ------
`scrollToLocationOffset?` | Param is inserted into `scrollToLocation` as `viewOffset`  [See React Native Docs](https://facebook.github.io/react-native/docs/sectionlist#scrolltolocation) | `number` | 0
`tabBarStyle?` | Styles for tabBar | `ViewStyle` | undefined
`renderTab` | Callback which returns a custom React Element to use as the tab bar `(section: SectionListData<any>) ` | `React.ReactNode` | Required
`SectionList` [props...](https://facebook.github.io/react-native/docs/sectionlist#props) |  |  |

<br>