open-index/open-npm huggingface dataset:
npm package: @page-blocks/react-client
Description: Extra React bindings for Page blocks (client only)
Author: stephenwf
Latest version: 0.0.5

# React client bindings

This page contains client-only React components for rendering Page Blocks. This module has a `'use client'` directive
ensuring it works with React Server Components. You should use `@page-blocks/react` instead of this module as it will 
import this package for the client-only components.
npm package: @page-blocks/react-editor
Description: React-based Page block editor implementation
Author: stephenwf
Latest version: 0.0.11

# Page blocks - React editor

This is a React implementation of the page blocks editor. It contains implementations for:

- `pb-editor`

and also bundles non-react implementations of:

- `pb-block`
- `pb-slot`
- `pb-context`

From `@page-blocks/web-components`
npm package: @page-blocks/screenshots
Description: Page block extension for taking screenshots of blocks
Author: stephenwf
Latest version: 0.0.4

# Page blocks - screenshots

This package will provide a way to generate and use screenshots of page blocks. Internally it uses 
[Playwright](https://playwright.dev/) to generate screenshots. You will need to install this first.

## Basic Usage
```js
import { join } from 'node:path';
import { cwd } from 'node:process';
import { createFileSystemLoader } from '@page-blocks/file-system';
import { createScreenshotGenerator } from '@page-blocks/screenshots';

export const generateScreenshots = createScreenshotGenerator({
  // URL to your dev server (or live site) - this will be used to load the blocks for screenshots
  host: 'http://localhost:3000',
  
  // == These are default options: ==
  // Where they should be saved.
  target: join(cwd(), 'public/blocks'),
  // The path to the page blocks "Block Archive"
  archivePath: './block-archive',
  // Viewport size to use for screenshots (height will only affect media queries)
  viewPort: { width: 1280, height: 800 },
});

export const fileSystemLoader = createFileSystemLoader({
  path: join(cwd(), 'slots'),
  contexts: [],
});

export const handler = createRequestHandler({
  loader: fileSystemLoader,
  directory,
  generateScreenshots, // Pass it to a request handler
});

// OR - generate screenshots manually
await generateScreenshots();
```

You will also need a page on your dev server or live site to list all the blocks.
The React implementation of the `createDirectory()` has a helper for this and to pass the `resolve.screenshots` option
to the directory configuration.

```js
// blocks/directory.js
import { createDirectory } from '@page-blocks/react';  
import { Card } from '../components/Card';
  
export const directory = createDirectory({  
  context: {},  
  resolver: {  
    type: 'tanstack-query',  
    endpoint: '/api/page-blocks',  
    screenshots: '/blocks', // Ensure you provide the public path to screenshots when creating your directory.
  },  
  blocks: {  
    Card,  
  },  
});

// An alternative to `directory.Slot` that just has the blocks
export const Blocks = directory.Blocks;

export const BlockArchive = directory.BlockArchive;
```


Which you can then use in your dev server or live site. For example, in Next.js (app directory):

```jsx
// app/block-archive/page.js
import { redirect } from 'next/navigation';
import { BlockArchive } from '~/blocks/directory';

export default function Page(): JSX.Element {
  // Only show this page in development
  if (process.env.NODE_ENV === 'production') {
    redirect('/');
  }

  return (
    <div>
      <BlockArchive />
    </div>
  );
}
```
npm package: @page-blocks/web-components
Description: Simple self-contained Vanilla Web Component implementations of Page Blocks pb-slot and pb-block
Author: stephenwf
Latest version: 0.0.8

# Page blocks - web components

> [!WARNING]  
> This implementation, specifically the way it communicates with context + the editor will change in the future.

This package implements the `pb-slot`, `pb-context` and `pb-block` web components. It renders a UI for editing page blocks.

It's bundled with other Editor implementations and does not need to be used directly. (e.g. `@page-blocks/react-editor`)