open-index/open-npm huggingface dataset:
npm package: @maktouch/kysely-bigquery
Description: BigQuery Dialect for Kysely
Author: Makara Sok
Latest version: 1.1.0

# @maktouch/kysely-bigquery

[Kysely](https://github.com/koskimas/kysely) adapter for [BigQuery](https://cloud.google.com/bigquery?hl=en).

```bash
npm i @google-cloud/bigquery @maktouch/kysely-bigquery
```

This project was largely adapted from [kysely-planetscale](https://github.com/depot/kysely-planetscale).

## Usage

Pass your BigQuery connection options, a BigQuery instance, a Dataset instance, or a Table instance into the dialect in
order to configure the Kysely client.
Follow [these docs](https://www.npmjs.com/package/@google-cloud/bigquery) for instructions on how to do so.

```typescript
import { Kysely } from 'kysely';
import { BigQueryDialect } from '@maktouch/kysely-bigquery';

interface SomeTable {
  key: string;
  value: string;
}

interface Database {
  some_datasets.some_table: SomeTable
}

// Let BigQueryDialect create the BiqQuery instance:
const options: BigQueryOptions = ...;
const db = new Kysely<Database>({ dialect: new BigQueryDialect({ options }) });

// Or pass in an existing instance
const bigquery: BigQuery | Dataset | Table = ...;
const db = new Kysely<Database>({ dialect: new BigQueryDialect({ bigquery }) });
```
npm package: @maktouch/kysely-zod-codegen
Description: `kysely-codegen` generates Kysely type definitions from your database. That's it.
Author: Makara Sok
Latest version: 0.6.2

# ![kysely-codegen](./assets/kysely-codegen-logo.svg) <!-- omit from toc -->

`kysely-codegen` generates Kysely type definitions from your database. That's it.

## Table of contents <!-- omit from toc -->

- [Installation](#installation)
- [Generating type definitions](#generating-type-definitions)
- [Using the type definitions](#using-the-type-definitions)

## Installation

```
npm install --save-dev kysely-codegen

# You will also need to install Kysely with your driver of choice:
npm install kysely pg
npm install kysely mysql2
npm install kysely better-sqlite3
npm install @libsql/kysely-libsql
```

## Generating type definitions

The most convenient way to get started is to create an `.env` file with your database connection string:

```
# PostgreSQL
DATABASE_URL=postgres://username:password@yourdomain.com/database

# MySQL
DATABASE_URL=mysql://username:password@yourdomain.com/database

# SQLite
DATABASE_URL=C:/Program Files/sqlite3/db

# LibSQL
DATABASE_URL=libsql://token@host:port/database
```

> If your URL contains a password with special characters, those characters may need to be [percent-encoded](https://en.wikipedia.org/wiki/Percent-encoding#Reserved_characters).
>
> If you are using _PlanetScale_, make sure your URL contains this SSL query string parameter: `ssl={"rejectUnauthorized":true}`

Then run:

```
kysely-codegen
```

This command will generate a `.d.ts` file from your database, for example:

```ts
import { ColumnType } from 'kysely';

export type Generated<T> = T extends ColumnType<infer S, infer I, infer U>
  ? ColumnType<S, I | undefined, U>
  : ColumnType<T, T | undefined, T>;

export type Timestamp = ColumnType<Date, Date | string, Date | string>;

export interface Company {
  id: Generated<number>;
  name: string;
}

export interface User {
  company_id: number | null;
  created_at: Generated<Timestamp>;
  email: string;
  id: Generated<number>;
  is_active: boolean;
  name: string;
  updated_at: Timestamp;
}

export interface DB {
  company: Company;
  user: User;
}
```

For more options, run `kysely-codegen --help`.

## Using the type definitions

Import `DB` into `new Kysely<DB>`, and you're done!

```ts
import { Kysely, PostgresDialect } from 'kysely';
import { DB } from 'kysely-codegen';
import { Pool } from 'pg';

const db = new Kysely<DB>({
  dialect: new PostgresDialect({
    pool: new Pool({
      connectionString: process.env.DATABASE_URL,
    }),
  }),
});

const rows = await db.selectFrom('user').selectAll().execute();
//    ^ { company_id: number | null; created_at: Date; email: string; id: number; ... }[]
```
npm package: @maktouch/reach-router
Description: Next generation Routing for React.
Author: Ryan Florence
Latest version: 1.3.1

<p align="center">
  <a href="https://reach.tech/router/">
    <img alt="Reach Router" src="./logo-horizontal.png" width="400">
  </a>
</p>

<p align="center">
  Next Generation Routing for <a href="https://facebook.github.io/react">React</a>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@reach/router"><img src="https://img.shields.io/npm/v/@reach/router.svg?style=flat-square"></a>
  <a href="https://www.npmjs.com/package/@reach/router"><img src="https://img.shields.io/npm/dm/@reach/router.svg?style=flat-square"></a>
  <a href="https://travis-ci.org/reach/router"><img src="https://img.shields.io/travis/reach/router/master.svg?style=flat-square"></a>
</p>

## Documentation

[Documentation Site](https://reach.tech/router)

You can also find the docs in the [website directory](./website/src/markdown).

## Community

[Join us on Spectrum](https://spectrum.chat/reach)

## Legal

MIT License
Copyright (c) 2018-present, Ryan Florence
npm package: @maktouch/use-popper
Description: ![npm](https://img.shields.io/npm/dt/use-popper.svg) ![npm](https://img.shields.io/npm/v/use-popper.svg) ![NpmLicense](https://img.shields.io/npm/l/use-popper.svg)
Latest version: 1.3.0

# Use Popper

![npm](https://img.shields.io/npm/dt/use-popper.svg)
![npm](https://img.shields.io/npm/v/use-popper.svg)
![NpmLicense](https://img.shields.io/npm/l/use-popper.svg)

## Installation

> Note: React 16.8+ is required for Hooks.

### With npm

```sh
npm i use-popper
```

### Or with yarn

```sh
yarn add use-popper
```

[![Edit usePopper](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ww293zr265?fontsize=14)

```js
import React from 'react';
import usePopper from 'use-popper';
import { useHover } from 'use-events';

function Tooltip(props) {
  const { referrence, popper, arrow } = usePopper({ placement: 'bottom' });
  const [active, bind] = useHover();

  return (
    <div>
      <button ref={referrence.ref} {...bind}>
        hover me
      </button>
      {active && (
        <div
          ref={popper.ref}
          style={popper.styles}
          data-placement={popper.placement}
        >
          <div>Hello!</div>
          <div ref={arrow.ref} style={arrow.styles} />
        </div>
      )}
    </div>
  );
}

export default Tooltip;
```
npm package: @makuja/peek
Description: Markdown and HTML preview CLI with live reload
Author: Hikaru Otabe
Latest version: 1.7.0

# @makuja/peek

Markdown and HTML preview CLI with live reload. Spins up a local web server and renders Markdown and HTML files in the browser with real-time updates via Server-Sent Events.

## Features

- **Markdown & HTML preview** - Renders Markdown with GitHub-flavored styles and previews HTML files in an isolated iframe
- **Live reload** - Automatically refreshes the browser when you save a file
- **Directory browsing** - Specify a directory to browse and preview Markdown and HTML files from a file tree
- **Syntax highlighting** - Code blocks are highlighted with Shiki
- **Custom CSS** - Customize Markdown styles via `--css` flag or `~/.config/peek/style.css`
- **Dark / Light theme** - Built-in theme toggle

## Requirements

- Node.js >= 22.0.0

## Install

```bash
npm install -g @makuja/peek
```

## Usage

```bash
# Preview a Markdown file
peek README.md

# Preview an HTML file
peek index.html

# Browse a directory (Markdown and HTML files)
peek docs/

# Preview current directory
peek

# Specify port and host
peek . --port 8080 --host 0.0.0.0

# Use custom CSS (Markdown only)
peek README.md --css ./custom.css

# Disable auto-open browser
peek README.md --no-open
```

## Options

| Option | Short | Default | Description |
|---|---|---|---|
| `path` | - | `.` | File (`.md`, `.html`, `.htm`) or directory path to preview |
| `--port` | `-p` | `3000` | Server port |
| `--host` | `-H` | `localhost` | Bind hostname (`0.0.0.0` for external access) |
| `--css` | `-c` | - | Path to a custom CSS file (Markdown only) |
| `--open` / `--no-open` | - | `true` | Auto-open browser on start |

## Custom CSS

Content styles for Markdown files can be customized in three ways (in priority order):

1. **`--css` flag** - Pass a CSS file path directly
2. **XDG config** - Place a `style.css` at `$XDG_CONFIG_HOME/peek/style.css` or `~/.config/peek/style.css`
3. **Built-in styles** - GitHub-flavored Markdown styles (default)

Custom CSS only affects the `.markdown-body` content area, not the layout chrome.

You can override design tokens (CSS custom properties) for full theme customization. See [`docs/design-token-example.css`](docs/design-token-example.css) for reference.

> **Note:** Custom CSS is not applied to HTML file previews. HTML files are rendered as-is in an isolated iframe with their own styles.

## License

MIT