open-index/open-npm huggingface dataset:
npm package: @stackbit/annotations
Description: Stackbit annotations utils
Author: Stackbit Inc.
Latest version: 0.1.101

# Stackbit Annotations

This package includes several utilities to work with Stackbit [annotations](https://docs.stackbit.com/reference/annotations/) in React. 

Stackbit annotations enable on-page editing experience for your site. Click [here](https://www.stackbit.com/) to learn more about Stackbit.

## Install

```shell
npm install @stackbit/annotations
```

## Usage

```jsx
import * as React from 'react';
import { toObjectId, toFieldPath } from '@stackbit/annotations';

export function MyComponent(props) {
  return (
    <div {...toObjectId(props.id)}>
       <h1 {...toFieldPath('title')}>{props.title}</h1>
       <img src={props.image} {...toFieldPath('image#@src')} />
       {props.link && (
         <a href={props.link.url} {...toFieldPath('link.url#@href', 'link.text')}>
           {props.link.text}
         </a>
       )}
    </div>
  );
}
```

Output:

```html
<div data-sb-object-id="...">
   <h1 data-sb-field-path="title">...</h1>
   <img src="..." data-sb-field-path="image#@src" />
   <a href="..." data-sb-field-path="link.url#@href link.text">...</a>
</div>
```

When `NODE_ENV` is set to `production`, `toObjectIds` and `toFieldPath` will return empty objects, effectively removing any Stackbit annotations.

## Utilities

### `toObjectId`

Takes a string and returns an object with that string inside the `data-sb-object-id` property. When `NODE_ENV` is set to `production`, this function returns an empty object.

```javascript
toObjectId('xyz');
// result: { 'data-sb-object-id': 'xyz' }
```

### `toFieldPath`

Takes field-path and returns an object with all field-paths concatenated into the `data-sb-field-path` property. Each field-path can be a string or a `FieldPathDescriptor`. When `NODE_ENV` is set to `production`, this function returns an empty object.

```javascript
toFieldPath('title', { objectId: 'xyz', fieldPath: 'url', xpath: '@href' });
// result: { 'data-sb-field-path': 'title xyz:url#@href' }
```

### `getObjectId`

Takes an object and returns the value of the `data-sb-object-id` property if it exists, otherwise returns undefined.

```javascript
getObjectId({ 'data-sb-object-id': 'xyz' });
// result: 'xyz'
```

### `getFieldPath`

Takes an object and returns the value of the `data-sb-field-path` property if it exists, otherwise returns undefined.

```javascript
getFieldPath({ 'data-sb-field-path': 'title' });
// result: 'title'
```

### `pickDataAttrs`

Takes an object and returns a new object with only the properties that start with `data-`

```javascript
getFieldPath({
    foo: 'bar',
    bar: 'foo',
    'data-sb-object-id': 'xyz',
    'data-sb-field-path': 'title'
});
// result:
// {
//   'data-sb-object-id': 'xyz',
//   'data-sb-field-path': 'title'
// }
```
npm package: @stackbit/cli
Description: Stackbit CLI
Author: Stackbit Inc.
Latest version: 0.3.136

# Stackbit CLI

## Documentation

To learn more about Stackbit CLI please visit [documentation](https://www.stackbit.com/docs/stackbit-cli/)

## Install

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

## Generate stackbit.yaml

To generate a new `stackbit.yaml` file, run the `init` command inside your project's root folder:

```shell
cd my-website
stackbit init
```


## Validate stackbit.yaml

To validate `stackbit.yaml` and your website's content files against the content model defined in `stackbit.yaml`, run the `validate` command in project with `stackbit.yaml`:

```bash
stackbit validate
```
npm package: @stackbit/components
Description: Stackbit components library
Author: Stackbit Inc.
Latest version: 0.1.56

# Stackbit Components Library

View the Component Library at [https://components.stackbit.com/](https://components.stackbit.com/)

## Quickstart

1. run `npm install`
1. run `npm run dev`
1. Navigate to http://localhost:6006/ to open Storybook

## About

This repository contains the **components** and **styles** used by Stackbit themes. It is published as an NPM module [@stackbit/components](https://www.npmjs.com/package/@stackbit/components) 

You can edit components and styles and view the changes in Storybook. 

> To use components locally with a theme without having to to publish to NPM every time use this repo: https://github.com/stackbit/stackbit-theme-utils

## Building Storybook

To build Storybook run `npm build`

## Building and Publishing Component Library

1. Make sure you are on the `main` branch
1. Check that all files are committed and there are no outstanding git changes.
1. Run `npm run version-patch` to update the patch `v0.1.0` => `v0.1.1` or run `npm run version-minor` to update the minor `v0.1.1` => `v0.2.0`. This script updates the versions of `package.json` and `package-lock.json`, commits the changes and applies a git tag with new version.
1. Run `git push origin main --tags`
1. Internal Stackbit CI/CD pipeline will publish the NPM package
npm package: @stackbit/contentful-listener
Description: Contentful's content listener based on Contentful's sync API
Author: Stackbit Inc.
Latest version: 0.1.0

# Contentful Listener

The Contentful listener listens for content changes in Contentful and invokes the provided callback when such changes occur.

Usage:

```typescript
import { ContentfulListener } from '@stackbit/contentful-listener';

const contentfulListener = new ContentfulListener({
    spaceId: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_PREVIEW_API_KEY,
    environment: 'master',
    host: 'preview.contentful.com',
    pollingIntervalMs: 1000,
    callback: (result: CallbackResponse) => {
        // Do something
    }
});
```

The `result` is a an object having the following interface, very similar to Contentful's [Sync API response](https://contentful.github.io/contentful.js/contentful/9.1.5/Sync.html#.SyncCollection):

```typescript
export interface CallbackResponse {
    entries: Array<Entry<any>>;
    assets: Array<Asset>;
    deletedEntries: Array<Entry<any>>;
    deletedAssets: Array<Asset>;
}
```
npm package: @stackbit/contentful-pull
Description: Tool to fetch content from Contentful and save it as files
Author: Stackbit Inc.
Latest version: 0.5.1

# contentful-pull

Stackbit Contentful pull, is a build tool that fetches stackbit site data from contentful and prepares it for
SSG build.

Usage:
```
Usage: contentful-pull [options]

Options:
  --ssg <ssg>                                       [required] Which SSG are you using [jekyll, hugo, gatbsby]
  --contentful-space-id <contentfulSpaceId>         [required] Contentful Space ID, can be also specified through CONTENTFUL_SPACE_ID environment variable
  --contentful-access-token <contentfulAccessToken> [required] Contentful access token, can be also specified through CONTENTFUL_ACCESS_TOKEN environment variable
  --contentful-environment <contentfulEnvironment>  [optional] Contentful environment, can be also specified through CONTENTFUL_ENVIRONMENT environment variable
  -h, --help                                        output usage information
```

- `ssg`: Defines which file format should be used when creating pages and data for your site. Required 
- `contentfulSpaceId`: Contentful space id. Required. Can be also specified via CONTENTFUL_SPACE_ID environment variable.
- `contentfulAccessToken`: Contentful delivery token, can be obtained from the API Keys page of your contentful space https://app.contentful.com/spaces/{space_id}/api/keys. Can be also specified via CONTENTFUL_ACCESS_TOKEN environment variable.
- `contentfulEnvironment`: Contentful environment, optional. Uses `master` by default. Can be also specified via CONTENTFUL_ENVIRONMENT environment variable.

## Examples

Using `npx`:
```
npx @stackbit/contentful-pull --ssg gatsby --contentful-space-id $CONTENTFUL_SPACE_ID --contentful-access-token $CONTENTFUL_ACCESS_TOKEN
```
npm package: @stackbit/datocms-pull
Description: Tool to fetch content from DatoCMS and save it as files
Author: Stackbit Inc.
Latest version: 0.5.1

# datocms-pull

Stackbit DatoCMS pull, is a build tool that fetches stackbit site data from DatoCMS and prepares it for
SSG build.

Usage:
```
Usage: datocms-pull [options]

Options:
  --ssg <ssg>                                       [required] Which SSG are you using [jekyll, hugo, gatbsby]
  --datocms-access-token <datocmsAccessToken>       [required] DatoCMS access token, can be also specified through DATOCMS_ACCESS_TOKEN environment variable
  -h, --help                                        output usage information
```

- `ssg`: Defines which file format should be used when creating pages and data for your site. Required
- `datocmsAccessToken`: DatoCMS access token, can be obtained from the API tokens admin page of your DatoCMS project https://{project_id}.admin.datocms.com/admin/access_tokens. Can be also specified via DATOCMS_ACCESS_TOKEN environment variable.

## Examples

Using `npx`:
```
npx @stackbit/datocms-pull --ssg gatsby --datocms-access-token $DATOCMS_ACCESS_TOKEN
```
npm package: @stackbit/eslint-config
Description: Stackbit's shareable config for ESLint
Author: Stackbit Inc.
Latest version: 1.2.1

# eslint-config [![NPM version](https://img.shields.io/npm/v/@stackbit/eslint-config.svg)](https://www.npmjs.com/package/@stackbit/eslint-config)

Stackbit's [shareable config](https://eslint.org/docs/developer-guide/shareable-configs) for [ESLint](https://eslint.org/)

## Installation

Install ESLint and `@stackbit/eslint-config`:

```
npm install --save-dev eslint @stackbit/eslint-config
```

### Prettier

`@stackbit/eslint-config` should be used in conjunction with [Prettier](https://prettier.io/). See the [`@stackbit/prettier-config` installation guide](https://github.com/stackbithq/prettier-config#installation) for more details.

## Usage
Stackbit's ESLint rules come bundled in `@stackbit/eslint-config`. To enable these rules, add an `eslintConfig` property in your `package.json`. See the [ESLint configuration docs](https://eslint.org/docs/user-guide/configuring) for more details.

```json
"eslintConfig": {
  "extends": ["@stackbit"]
}
```

Now you can run ESLint by adding the following scripts to your `package.json`. See the [ESLint CLI docs](https://eslint.org/docs/user-guide/command-line-interface) for more details.

```json
"scripts": {
  "lint:js": "eslint --cache --ext .js,.jsx .",
  "format:js": "npm run lint:js -- --fix"
}
```

Lint it:

```
npm run lint:js
```

Format it:

```
npm run format:js
```

## [CHANGELOG](CHANGELOG.md)

## [LICENSE](LICENSE)
npm package: @stackbit/prettier-config
Description: Stackbit's shareable config for prettier
Author: Stackbit Inc.
Latest version: 1.2.0

# prettier-config [![NPM version](https://img.shields.io/npm/v/@stackbit/prettier-config.svg)](https://www.npmjs.com/package/@stackbit/prettier-config)

Stackbit's [shareable config](https://prettier.io/docs/en/configuration.html#sharing-configurations) for [Prettier](https://prettier.io/)

## Installation

Install Prettier and `@stackbit/prettier-config`:

```
npm install --save-dev prettier @stackbit/prettier-config
```

## Usage

Stackbit's Prettier rules come bundled in `@stackbit/prettier-config`. To enable these rules, add a `prettier` property in your `package.json`. See the [Prettier configuration docs](https://prettier.io/docs/en/configuration.html) for more details.

```json
"prettier": "@stackbit/prettier-config"
```

If you don't want to use `package.json`, you can use any of the supported extensions to export a string:

```jsonc
// `.prettierrc.json`
"@stackbit/prettier-config"
```

```javascript
// `prettier.config.js` or `.prettierrc.js`
module.exports = '@stackbit/prettier-config';
```

## Extending

This configuration is not intended to be changed, but if you have a setup where modification is required, it is possible. Prettier does not offer an "extends" mechanism as you might be familiar from tools such as ESLint.

To extend a configuration you will need to use a `prettier.config.js` or `.prettierrc.js` file that exports an object:

```javascript
module.exports = {
  ...require('@stackbit/prettier-config'),
  semi: false
};
```

## Changelog

Changes are recorded in [`CHANGELOG.md`](CHANGELOG.md).

## License

Distributed under the MIT License. See [`LICENSE`](LICENSE) for more information.
npm package: @stackbit/sanity-pull
Description: Tool to fetch content from Sanity and save it as files
Author: Stackbit Inc.
Latest version: 0.5.1

# sanity-pull

Stackbit Sanity pull, is a build tool that fetches stackbit site data from sanity and prepares it for
SSG build.

Usage:
```
Usage: sanity-pull [options]

Options:
  --ssg <ssg>                                       [required] Which SSG are you using [jekyll, hugo, gatbsby]
  --sanity-project-id <sanityProjectId>             [required] Sanity Project ID, can be also specified through SANITY_PROJECT_ID environment variable
  --sanity-access-token <sanityAccessToken>         [required] Sanity access token, can be also specified through SANITY_ACCESS_TOKEN environment variable
  --sanity-dataset <dataset>                        [optional] Sanity dataset, can be also specified through SANITY_DATASET environment variable
  -h, --help                                        output usage information
```

- `ssg`: Defines which file format should be used when creating pages and data for your site. Required
- `sanityProjectId`: Sanity Project ID. Required. Can be also specified via SANITY_PROJECT_ID environment variable.
- `sanityAccessToken`: Sanity access token, can be obtained from the API Settings page of your sanity manage panel https://manage.sanity.io/projects/{project_id}/settings/api. Can be also specified via SANITY_ACCESS_TOKEN environment variable.
- `dataset`: Sanity dataset, optional. Uses `production` by default. Can be also specified via SANITY_DATASET environment variable.

## Examples

Using `npx`:
```
npx @stackbit/sanity-pull --ssg gatsby --sanity-project-id $SANITY_PROJECT_ID --sanity-access-token $SANITY_ACCESS_TOKEN
```
npm package: @stackbit/schema
Description: Stackbit schema tools
Author: Stackbit Inc.
Latest version: 0.1.5

# Stackbit Schema

Stackbit schema tools

## Install

```bash
npm install @stackbit/schema
```

## Utility Functions


### `loadModels(models)`

Takes raw `models` map as defined by stackbit.yaml format and returns an array of sanitized models.

```yaml
# part of stackbit.yaml

models:
  post:
    type: page
    layout: post
    folder: blog
    fields:
      - type: string
        name: title
        label: Title
        required: true
      # ...fields
  person:
    type: data
    label: Person
    folder: authors
    fields:
      # ...fields
```

```js
const stackbitYaml = await parseFile('path/to/stackbit.yaml');
const models = loadModels(stackbitYaml.models);
```

The returned `models` is a sanitized array of models:
```js
[
  {
    "name": "post",
    "type": "page",
    "label": "Post",
    "fieldLabel": "title",
    "layout": "post",
    "folder": "blog",
    "fields": [ /* fields */ ]
  },
  {
    "name": "person",
    "type": "data",
    "label": "Person",
    "folder": "authors",
    "fields": [ /* fields */ ]
  }
]
```

### `getModelByQuery(query, models)`

Takes a query object representing a loaded content file and `models` array returned by `loadModels()`
and returns a model matching the query.

```js
const model = getModelByQuery({ filePath: 'authors/john-doe.json' }, models);
// model => model for "person" type
```
npm package: @stackbit/sdk
Description: Stackbit SDK
Author: Stackbit Inc.
Latest version: 2.1.21

# Stackbit SDK

Stackbit SDK contains set of utilities to work with stackbit.yaml file. 


## Add to your project

```bash
npm install @stackbit/sdk
```


## Generate stackbit.yaml

Create a `FileBrowser` with `FileSystemFileBrowserAdapter` or `GitHubFileBrowserAdapter`:

- Analyzing a local project:

    ```js
    import { FileSystemFileBrowserAdapter, FileBrowser } from '@stackbit/sdk';
  
    const fileBrowserAdapter = new FileSystemFileBrowserAdapter({ dirPath: inputDir });
    const fileBrowser = new FileBrowser({ fileBrowserAdapter });
    ```

- Analyzing a remote GitHub project:

    ```js
    import { GitHubFileBrowserAdapter, FileBrowser } from '@stackbit/sdk';
  
    const fileBrowserAdapter = new GitHubFileBrowserAdapter({
        owner: 'stackbit',
        repo: 'theme',
        branch: 'master',
        auth: GITHUB_PERSONAL_ACCESS_TOKEN
    });
    const fileBrowser = new FileBrowser({ fileBrowserAdapter });
    ```

Then, pass the `fileBrowser` to the `analyzeSite()` method, get the result and save the `config` as `stackbit.yaml`:

```js
import { writeConfig, analyzeSite } from '@stackbit/sdk';

const analyzeResult = await analyzeSite({ fileBrowser });
await writeConfig({ dirPath: inputDir, config: analyzeResult.config });
```


## Validate stackbit.yaml

Load and validate `stackbit.yaml`. Any errors will be returned within the `errors` array.

```js
import { loadConfig } from '@stackbit/sdk';

const configResult = await loadConfig({ dirPath: inputDir });

configResult.errors.forEach((error) => {
    console.log(error.message);
});
```

If `configResult.config` is not null, pass it to load and validate web-site's content. Any errors will be returned within the `errors` array, and loaded content within the `contentItems`:

```js
import { loadContent } from '@stackbit/sdk';

if (configResult.config) {
    return;
}

const contentResult = await loadContent({ dirPath: inputDir, config: configResult.config });

contentResult.contentItems.forEach((contentItem) => {
    console.log(contentItem.__metadata.filePath);
});

contentResult.errors.forEach((error) => {
    console.log(error.message);
});
```
npm package: @stackbit/stackbit-medium-importer
Description: Stackbit Medium Importer
Author: Stackbit
Latest version: 0.2.0

# stackbit-medium-importer

A small library to convert [medium export](https://medium.com/me/export) zip files to static-site-generator (SSG) friendly Markdown files.

# Demo

The Medium importer can be seen in action on the [Stackbit website](https://www.stackbit.com/medium).

# Install

```
npm install @stackbit/stackbit-medium-importer
```

# How to use

The module comes with a utility to invoke the importer directly.

```
$ medium-importer
Usage: medium-importer --input-file=<input-file> --output-dir=<output-dir> --concurrency=<concurrency> --download-images=<download-images> --import-drafts=<import-drafts>

Options:
  --help                 Show help  [boolean]
  --version              Show version number  [boolean]
  --input-file, -i       medium export zip file  [required]
  --output-dir, -o       target folder for the converted files  [required]
  --concurrency, -c      number of posts to process in parallel [default: 1]
  --download-images, -d  should images be downloaded [default: true]
  --import-drafts, -r    should drafts be imported [default: true]

Examples:
  medium-importer -i medium-export.zip -o output/
  ```

# Importer output

The output directory is populated with the imported data, following a structure that makes it straightforward to later use with an SSG. For certain SSG's (like Hugo) it's possible to point the utility directly at your project.

The output directories can be configured when working with the library directly.

### `content/posts`

Markdown pages representing imported Medium posts.

```yaml
---
template: post
title: My Blog Post
date: 2018-10-08T15:01:02.452Z
subtitle: >-
  This post is a posty post, and this is its subtitle.
excerpt: >-
  An excerpt of the post
thumb_img_path: >-
  images/My-Blog-Post/image.jpeg
content_img_path: >-
  images/My-Blog-Post/splash.jpeg
---

# My Post

Markdown content goes **HERE**
```

### `static/images`

* Per-post images organized in directories with the post's slug.
* Global images extracted from the Medium export: `avatar.png` if available.


### `data/data.json`

Extraced information in `JSON` format:

```json
{
  "author": {
    "name": "My Name",
    "email": "email@example.com",
    "avatar": "images/avatar.png"
  },
  "social": {
    "twitter": {
      "username": "@myuser",
      "url": "https://twitter.com/@myuser"
    }
  }
```
npm package: @stackbit/stackbit-pull
Description: Tool to fetch content from Stackbit's API
Author: Stackbit Inc.
Latest version: 0.5.1

# stackbit-pull

Stackbit pull, is a build tool that fetches data from CMS using Stackbit's API and prepares it for
SSG build. 

Usage:
```
Usage: stackbit-pull [options]

Options:
  --stackbit-pull-api-url <stackbitPullApiUrl>  [required] stackbit pull API URL
  --stackbit-api-key <stackbitApiKey>           [required] stackbit API key, can be also specified through STACKBIT_API_KEY environment variable
  -h, --help                                    output usage information
```

- `stackbitPullApiUrl`: Stackbit pull URL, takes following form: https://api.stackbit.com/pull/<stackbitProjectId>
- `stackbitApiKey`: Stackbit API key, can be acquired in project's API Keys section in https://app.stackbit.com/dashboard. Can be also specified via STACKBIT_API_KEY environment variable.

## Examples

Using `npx`:
```
npx @stackbit/stackbit-pull --stackbit-pull-api-url=https://api.stackbit.com/pull/<stackbitProjectId> --stackbit-api-key=...
```

Using `STACKBIT_API_KEY`:
```
export STACKBIT_API_KEY=...
./stackbit-pull.js --stackbit-pull-api-url=https://api.stackbit.com/pull/<stackbitProjectId>
```


**Using local json file:**

If you have a local json file with the following structure already downloaded,
```json
[
  {
    "filePath": "src/pages/posts/post-1.md",
    "urlPath": "posts/post-1",
    "data": "---\nstackbit_url_path: >-..."
  },
  ...
]
```
then you can skip the network step by using the following command
(no need to provide `STACKBIT_API_KEY` in this scenario):
```shell
npx @stackbit/stackbit-pull stackbit-pull-local-json --json-file=/path/to/your/json/file.json
```
npm package: @stackbit/storybook-addon
Description: A storybook addons that lets you generate Stackbit models and presets from your components and stories.
Author: Stackbit
Latest version: 1.0.5-alpha

# @stackbit/storybook-addon
A Storybook add-on that lets you generate Stackbit models and presets from your components and stories, to add to your Stackbit project. 

This is useful for scaffolding model definitions and presets in a new project, based on your existing stories. The generated models will usually not include all relevant fields - but can serve as a good basis to improve upon later.

https://user-images.githubusercontent.com/2673881/200615123-d7277ed1-85c2-4aa3-b9e3-688be2874662.mp4

## Installation

Install the package:

```bash
npm install -D @stackbit/storybook-addon
```

Then, include the add-on in your Storybook config file (`.storybook/main.js`):

```javascript
// .storybook/main.js

module.exports = {
    stories: [
        // ...
    ],
    addons: [
        '@stackbit/storybook-addon'
    ],
};
```

## Usage

Once installed, re-launch Storybook you will see a _Stackbit_ tab next to the standard _Controls_ and _Actions_ tab, through which you can download the model file and presets for the current story. 

Please note the displayed list of which fields are of a supported type and included in the model. For others, you can then define these model fields yourself (see [Definining Models](https://docs.stackbit.com/reference/defining-models)).

If you have any questions, please contact us through any of the [support channels](https://www.stackbit.com/support), e.g. on [Discord](https://discord.gg/HUNhjVkznH).
npm package: @stackbit/stylelint-config
Description: Stackbit's shareable config for stylelint
Author: Stackbit Inc.
Latest version: 1.2.0

# stylelint-config [![NPM version](https://img.shields.io/npm/v/@stackbit/stylelint-config.svg)](https://www.npmjs.com/package/@stackbit/stylelint-config)

Stackbit's [shareable config](https://stylelint.io/user-guide/configuration#extends) for [stylelint](https://stylelint.io/)

## Installation

Install stylelint and `@stackbit/stylelint-config`:

```
npm install --save-dev stylelint @stackbit/stylelint-config
```

### Prettier

`@stackbit/eslint-config` should be used in conjunction with [Prettier](https://prettier.io/). See the [`@stackbit/prettier-config` installation guide](https://github.com/stackbithq/prettier-config#installation) for more details.

## Usage
Stackbit's stylelint rules come bundled in `@stackbit/stylelint-config`. To enable these rules, add a `stylelint` property in your `package.json`. See the [stylelint configuration docs](https://stylelint.io/user-guide/configuration/) for more details.

```
"stylelint": {
  "extends": ["@stackbit/stylelint-config"]
}
```

Now you can run stylelint by adding the following scripts to your `package.json`. See the [stylelint CLI docs](https://stylelint.io/user-guide/cli/) for more details.

```
"scripts": {
  "lint:css": "stylelint '**/*.{css,scss}'",
  "format:css": "npm run lint:css -- --fix"
}
```

Lint it:

```
npm run lint:css
```

Format it:

```
npm run format:css
```

## [CHANGELOG](CHANGELOG.md)

## [LICENSE](LICENSE)
npm package: @stackbit/unibit
Description: Stackbit's static site generator powered by Nunjucks templating language
Latest version: 0.1.32

# Unibit

Unibit is a superset of existing static site generators, if you build a theme
according to the [Unibit spec](https://docs.stackbit.com/unibit/) then 
[Stackbit](https://www.stackbit.com) will be able to convert (transpile) it into 
a host of target SSGs. 

The following conversions are currently supported by Stackbit:
* **Static Site Generators**: Jekyll, Hugo, Gatsby, Next.js
* **Headless CMS**: Forestry, Netlify CMS, DatoCMS, Contentful, Sanity

## Documentation

[Unibit Documentation](https://docs.stackbit.com/unibit)

## Quickstart

```
npm install -g @stackbit/unibit
```

Create a starter site.
```
unibit init
```

Go to the created folder

```
cd unibit-universal
```

Start the local development server. 

```
unibit develop
```

Compile a production build into the `public` folder.

```
unibit build
```
npm package: @stackblitz/sdk
Description: SDK for generating and embedding StackBlitz projects.
Author: Eric Simons
Latest version: 1.11.0

# StackBlitz SDK

The StackBlitz JavaScript SDK lets you programmatically create StackBlitz projects to be opened in a new window or embedded in your docs, example pages, or blog posts.

## Documentation

Check out our SDK documentation on developer.stackblitz.com:

- [SDK overview](https://developer.stackblitz.com/platform/api/javascript-sdk)
- [Options reference](https://developer.stackblitz.com/platform/api/javascript-sdk-options)
- [Controlling embeds](https://developer.stackblitz.com/platform/api/javascript-sdk-vm)

## Reporting issues

- Issues with the SDK can be filed at https://github.com/stackblitz/sdk/issues
- Other issues with StackBlitz can be filed at https://github.com/stackblitz/core/issues

## Development

We use `npm` and Node 16+.

```sh
# Install dependencies
npm install

# Start a development server to explore examples
npm start

# Run unit tests
npm test

# Run end-to-end tests with mock server
npm run test:e2e

# Run end-to-end tests against stackblitz.com
STACKBLITZ_SERVER_ORIGIN=https://stackblitz.com npm run test:e2e

# Generate the 'bundles' and 'types' folders
npm run build
```
npm package: @stackblitz/storybook-addon-stackblitz
Description: Create a one-click Pull Request environment right from your component
Author: Tomek Sułkowski
Latest version: 0.0.5

# Storybook Addon StackBlitz
Create a one-click Pull Request environment right from your component

## Installation

yarn:
```bash
yarn add --dev @stackblitz/storybook-addon-stackblitz
```

npm:
```bash
npm install @stackblitz/storybook-addon-stackblitz --save-dev
```

pnpm:
```bash
pnpm add --save-dev @stackblitz/storybook-addon-stackblitz
```

## Usage

Add the following to your `.storybook/main.ts` (or `.storybook/main.js`) exports:

```typescript
export default {
  addons: ['@stackblitz/storybook-addon-stackblitz'],
};
```

Configure the repository URL in the `.storybook/preview.ts` (or `.storybook/preview.js`):
```typescript
export default {
  parameters: {
    repositoryUrl: 'https://github.com/[username]/[reponame]'
  },
};
```

In your story files set the file path for the specific story, for instance:
```typescript
export const Primary: Story = {
  args: {/* ... */},
  parameters: {
    filePath: 'src/stories/Button.tsx'
  }
};
```

If your components are placed in multiple repositories, you can also define the repository URL per the specific story:
```typescript
export const Primary: Story = {
  args: {/* ... */},
  parameters: {
    filePath: 'src/stories/Button.tsx',
    repositoryUrl: 'https://github.com/[username]/[reponame]'
  }
};
```


## Development scripts

- `yarn start` runs babel in watch mode and starts Storybook
- `yarn build` build and package your addon code

## Addon icon

(for Storybook [integration catalog](https://storybook.js.org/integrations))

![icon](https://github.com/stackblitz/storybook-addon-stackblitz/assets/1511906/d8b5c029-8633-4d16-8a9e-5d5fe8456aeb)
npm package: @stackborg/ui-kits
Description: Tailwind CSS component library — theme-agnostic, extendable, production-ready
Author: stackborg
Latest version: 0.1.2

# @stackborg/ui-kits

> Tailwind CSS component library — theme-agnostic, extendable, production-ready.

[![npm version](https://img.shields.io/npm/v/@stackborg/ui-kits.svg)](https://www.npmjs.com/package/@stackborg/ui-kits)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)

---

> **⚠️ Maintenance Disclaimer**
>
> This library is built and maintained by [Stackborg](https://github.com/stackborg) **exclusively for internal Stackborg products**. While it is open-source and freely available under the MIT license, **we are not obligated to provide support, fix bugs, or accept contributions from external users**.
>
> You are welcome to use, fork, and modify this library at your own risk. No guarantees are made regarding backward compatibility, timely updates, or fitness for your specific use case.
>
> **Use at your own risk. No external support will be provided.**

---

## Install

```bash
npm install @stackborg/ui-kits
```

**Peer dependencies:**
```bash
npm install react react-dom tailwindcss framer-motion
```

## Setup

Import the default theme in your app's CSS entry:

```css
@import "@stackborg/ui-kits/theme";
@import "tailwindcss";
```

## Usage

```tsx
import { Button, Badge, Input, Modal, Card } from "@stackborg/ui-kits";

function App() {
  return (
    <Card hoverable>
      <Card.Header>
        <Card.Title>License</Card.Title>
      </Card.Header>
      <Card.Body>
        <Input placeholder="Enter key..." />
      </Card.Body>
      <Card.Footer>
        <Button>Activate</Button>
        <Badge variant="success">Active</Badge>
      </Card.Footer>
    </Card>
  );
}
```

## Custom Theme

Override CSS variables in your project:

```css
:root {
  --ui-primary: 221 83% 53%;
  --ui-destructive: 0 84% 60%;
  --ui-radius: 0.75rem;
}

.dark {
  --ui-background: 222 47% 11%;
  --ui-foreground: 210 40% 98%;
}
```

## Components

### Atoms
`Button` · `Badge` · `Spinner` · `Skeleton` · `Separator` · `Avatar`

### Forms
`Label` · `Input` · `Textarea` · `Select` · `Checkbox` · `Switch`

### Composites
`Card` · `Modal` · `Drawer` · `Tooltip` · `Dropdown` · `Tabs`

## Development

```bash
npm run dev              # Storybook on localhost:6006
npm run build            # Library build (ESM + CJS + DTS)
npm run build:storybook  # Static storybook
```

## Publishing

Automated via GitHub Actions. To publish a new version:

```bash
# 1. Make your changes and commit
git add -A && git commit -m "feat: add new component"

# 2. Bump version
npm version patch   # bug fix (0.1.0 → 0.1.1)
npm version minor   # new feature (0.1.0 → 0.2.0)
npm version major   # breaking change (0.1.0 → 1.0.0)

# 3. Push with tags — GitHub Actions will auto-publish to npm
git push origin main --tags
```

## License

[MIT](./LICENSE) — © 2026 Stackborg. See [Maintenance Disclaimer](#maintenance-disclaimer) above.
npm package: @stackborg/wp-ui-kits
Description: Shared React dashboard core for Stackborg WordPress plugins — API client, hooks, components, and design tokens.
Author: Stackborg
Latest version: 1.0.1

# WP UI Kits

Shared React component library for WordPress plugin dashboards.

> **Internal package.** Maintained by [Stackborg](https://stackborg.com) for its own products. Public use permitted under MIT — no external support or guarantees. Use at your own risk.

## Requirements

- React 18+
- React Router Dom 7+
- Node.js 20+

## Install

```bash
npm install @stackborg/wp-ui-kits
```

## What's Inside

| Export | Type | Purpose |
|--------|------|---------|
| `createDashboard` | Bootstrap | Mount React app into WP admin |
| `createApiClient` | API | Typed REST client with auto-nonce |
| `useApi` | Hook | Data fetching (loading/error/refetch) |
| `useWordPressData` | Hook | Typed access to `window.sb*Data` |
| `useToast` | Hook | Toast notification state |
| `DashboardShell` | Layout | Collapsible sidebar + content area |
| `ErrorBoundary` | Component | Catches render errors |
| `PageHeader` | Component | Title + actions layout |
| `Card` | Component | Stat/info cards |
| `StatusBadge` | Component | Colored status labels |
| `LoadingState` | Component | Skeleton / spinner |
| `EmptyState` | Component | No data placeholder |
| `ToastContainer` | Component | Toast notifications |
| `ConfirmDialog` | Component | Destructive action modal |
| `DataTable` | Component | Sortable table with custom renderers |
| **Addon System** | | |
| `useAddons` | Hook | Addon listing, install, activate, update |
| `useFeature` | Hook | Feature accessibility check |
| `useLicense` | Hook | License activate/deactivate |
| `AddonsPage` | Component | Full addon management page |
| `AddonCard` | Component | Individual addon card with actions |
| `FeatureGate` | Component | Conditional render by feature access |

## Usage

See **[DEVELOPER_GUIDE.md](DEVELOPER_GUIDE.md)** for complete API reference and examples.

## Development

```bash
npm install
npm run lint && npm run typecheck && npm test
```

## License

MIT — No warranty. No external support.
npm package: @stackcanon/cli
Description: Stack-aware governance installer for existing JavaScript and TypeScript projects.
Author: Nozim Mansurov
Latest version: 0.1.1

# @stackcanon/cli

`stackcn` is the StackCanon CLI for existing JavaScript and TypeScript projects.

## Install

```bash
npm i -g @stackcanon/cli
```

## Quick Start

```bash
stackcn doctor
stackcn init
stackcn generate
```

## What It Does

- detects the current framework and quality-tool state
- applies safe stack-aware config patches
- generates canonical `ai/` context plus derived AI-tool outputs
- syncs official docs into `.stackcn/sources/`

## Main Commands

- `stackcn doctor`
- `stackcn init`
- `stackcn add`
- `stackcn generate`
- `stackcn sync`
- `stackcn revert`

## Supported Stacks

- Next.js
- Nuxt
- Vite React
- Vite Vue
- TanStack Start
- TanStack Query
- NestJS
- Express
- Fastify

## Supported Quality Providers

- Ultracite
- Biome
- Oxlint

## Links

- Repository: https://github.com/liildev/stackcanon
- Issues: https://github.com/liildev/stackcanon/issues
npm package: @stackch/barcode
Description: Angular barcode library (render + scanner)
Author: stackch
Latest version: 1.0.1

# @stackch/barcode

Angular 20+ standalone barcode component library. Supports 1D barcodes (EAN, CODE128, etc.), QR codes, DataMatrix, and more.

## Features
- Standalone Angular component (no NgModule required)
- 1D barcode rendering via JsBarcode
- QR code rendering via qrcode
- DataMatrix via @zxing/library
- Error handling for unsupported formats
- Material wrapper available

## Installation
```bash
npm install @stackch/barcode
```

or with yarn:
```bash
yarn add @stackch/barcode
```

## Usage
```html
<stackch-barcode [value]="'1234567890'" [format]="'CODE128'"></stackch-barcode>
```

## Supported Formats
- CODE128, EAN, UPC, ITF, etc. (JsBarcode)
- QR (qrcode)
- DataMatrix (@zxing/library)

## Demo
See `/projects/demo` for a full-featured Angular Material demo.

## License
MIT
npm package: @stackcode/i18n
Description: Internationalization (i18n) package for StackCode.
Author: Yago Borba
Latest version: 2.0.1

# @stackcode/i18n

This package manages the internationalization (i18n) logic for the StackCode CLI, allowing the user interface to be displayed in multiple languages.

## Usage

The package exports three main functions:

- `initI18n()`: Initializes the system by detecting the user's configured language and loading the appropriate JSON translation file from `src/locales/`.
- `getLocale()`: Returns the currently active locale string (e.g., `'en'`, `'pt'`).
- `t(key: string, variables?: object)`: The translation function. It takes a key (e.g., `'common.yes'`) and returns the translated string.

## Adding a New Language

1.  Create a new JSON file in `src/locales/` (e.g., `es.json`).
2.  Copy the keys from `en-US.json` and provide the translations.
3.  Update the `config` command in the `@stackcode/cli` package to include the new language as an option.