open-index/open-npm huggingface dataset:
npm package: @storyblok/region-helper
Description: [![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![bundle][bundle-src]][bundle-href] [![Codecov][codecov-src]][codecov-href]
Latest version: 1.4.0

# @storyblok/region-helper

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![Codecov][codecov-src]][codecov-href]

A helper package to handle Storyblok APIs in different regions.

## Usage

Install package:

```sh
# npm
npm install @storyblok/region-helper

# yarn
yarn add @storyblok/region-helper

# pnpm
pnpm install @storyblok/region-helper

# bun
bun install @storyblok/region-helper
```

Import:

```js
// ESM
import {} from '@storyblok/region-helper'

// CommonJS
const {} = require('@storyblok/region-helper')
```

## How it works

The `region-helper` package helps identify the region to which a given Space ID belongs, while abstracting away complexities such as handling different Space ID formats (e.g., range-based or bit-based).

- For values < 2^48: Uses range-based identification
- For values ≥ 2^48: Uses bit-based identification

### 1. Range-based Identification (Legacy)

For space IDs up to 32 bits, regions are determined by number ranges:

- **EU/CN**: 0 to 1,000,000
- **US**: 1,000,000 to 2,000,000
- **CA**: 2,000,000 to 3,000,000
- **AP**: 3,000,000 to 4,000,000

```js
// Example with legacy space ID
const spaceId = 1_500_000
const region = getRegion(spaceId) // Returns 'us'
```

### 2. Bit-based Identification (v1.2.0+)

For space IDs of 49-53 bits, the region is encoded in the first 5 bits:

- `0b00000` or `0b00001`: EU (Europe)
- `0b00010`: US (United States)
- `0b00011`: CA (Canada)
- `0b00100`: AP (Australia)
- `0b00110`: CN (China)

```js
// Example with new space ID format
const spaceId = 282_994_740_194_929n
const region = getRegion(spaceId) // Returns 'eu'
```

This ensures backward compatibility while supporting the [new extended space ID format](https://www.storyblok.com/mp/upcoming-update-to-the-id-format-of-spaces-and-entities).

## License

Made with 💛

Published under [MIT License](./LICENSE).

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@storyblok/region-helper?style=flat&colorA=18181B&colorB=F0DB4F
[npm-version-href]: https://npmjs.com/package/@storyblok/region-helper
[npm-downloads-src]: https://img.shields.io/npm/dm/@storyblok/region-helper?style=flat&colorA=18181B&colorB=F0DB4F
[npm-downloads-href]: https://npmjs.com/package/@storyblok/region-helper
[codecov-src]: https://img.shields.io/codecov/c/gh/unjs/@storyblok/region-helper/main?style=flat&colorA=18181B&colorB=F0DB4F
[codecov-href]: https://codecov.io/gh/unjs/@storyblok/region-helper
[bundle-src]: https://img.shields.io/bundlephobia/minzip/@storyblok/region-helper?style=flat&colorA=18181B&colorB=F0DB4F
[bundle-href]: https://bundlephobia.com/result?p=@storyblok/region-helper
npm package: @storyblok/storyblok-editable
Description: Create editable components for Storyblok
Author: Storyblok
Latest version: 1.1.0
Deprecated: This package is deprecated. Please use the Storyblok SDK for React or Gatsby. Or you can use the @storyblok/js package

# Storyblok Editable

Use this module to make your components editable in [storyblok.com](https://www.storyblok.com/)

### Installation

```sh
$ npm install @storyblok/storyblok-editable --save
```

### Example

```js
import { sbEditable } from "@storyblok/storyblok-editable";

return <div {...sbEditable(blok)}></div>;
```

## License

MIT

## Contribution

Fork me on [Github](https://github.com/storyblok/storyblok-editable).

This project use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check [this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) about it in semantic-release FAQ.
npm package: @storybook-addons/docs
Description: Documentation layout for official [@storybook/addon-docs](https://github.com/storybookjs/storybook/tree/next/addons/docs) with the ability to embed [examples](#inline-stories) and [placeholders](#placeholders).
Author: Eugene Tropin
Latest version: 2.0.1

# @storybook-addons/docs &middot; [![npm (scoped)](https://img.shields.io/npm/v/@storybook-addons/docs.svg)](https://www.npmjs.com/package/@storybook-addons/docs)

Documentation layout for official [@storybook/addon-docs](https://github.com/storybookjs/storybook/tree/next/addons/docs) with the ability to embed [examples](#inline-stories) and [placeholders](#placeholders).

<p align="center">
  <img height="500" src="https://user-images.githubusercontent.com/7934638/75613474-3183a600-5b3f-11ea-9fc4-021463781803.png">
</p>

## Install

```bash
npm i -D @storybook-addons/docs @storybook/addon-docs
```

## Usage

1. Add `@storybook/addon-docs` into addons in `main.js` file:

```js
module.exports = {
  addons: ['@storybook/addon-docs'],
}
```

2. Set `DocsPage` in `preview.js` file:

```js
import { addParameters } from '@storybook/react'
import { DocsPage } from '@storybook-addons/docs'

addParameters({
  docs: {
    container: DocsPage,
  },
})
```

3. Add documentation for your story:

```js
import documentation from './Component.md'

export default {
  title: 'Controls/Component',
  parameters: {
    docs: {
      readme: documentation,
    },
  },
}
```

### Params

| Option           | Description                                      | Default |
| ---------------- | ------------------------------------------------ | ------- |
| enableNavigation | Show navigation at right sidebar                 | `true`  |
| readme           | Documentation content                            |         |
| placeholders     | Object with placeholder which should be replaced |         |

## Markdown syntax

### Inline stories

Your can embeded single or multipile stories (with tabs) in documentation:

```markdown
<!-- single story -->

{{%story::story-id%}}

<!-- multi stories with tab names -->

{{%story::tabName:story-id|tabName:story-id%}}
```

### Placeholders

If necessary you can embedded placeholder for example other part of documentation:

```markdown
{{%inject::placeholderName%}}
```

## License

Project is [MIT licensed](https://github.com/yarastqt/mercury/blob/master/LICENSE.md).
npm package: @storybook-addons/source-loader
Description: Source loader for storybook stories
Author: Eugene Tropin
Latest version: 1.1.2

# @storybook-addons/source-loader &middot; [![npm (scoped)](https://img.shields.io/npm/v/@storybook-addons/source-loader.svg)](https://www.npmjs.com/package/@storybook-addons/source-loader)

Webpack-loader for story sources at docs page.

Why not [native source-loader](https://github.com/storybookjs/storybook/tree/next/lib/source-loader)? Because them have [issue](https://github.com/storybookjs/storybook/issues/10827) with shorthand parameters.

## Install

```sh
npm i -D @storybook-addons/source-loader
```

## Usage

Add loader for webpack rules at before ts or babel loaders:

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx/,
        use: 'ts-loader',
      },
      {
        test: /\.examples\.tsx/,
        use: '@storybook-addons/source-loader',
      },
    ],
  },
}
```

### Options

A source-loader supports [prettier][prettier] for formatting source code:

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.examples\.tsx/,
        loader: '@storybook-addons/source-loader',
        options: {
          prettier: {
            printWidth: 100,
          },
        },
      },
    ],
  },
}
```

## License

Project is [MIT licensed](https://github.com/yarastqt/mercury/blob/master/LICENSE.md).

[prettier]: https://github.com/prettier/prettier
npm package: @storybook-addons/sync-external-url
Description: Sometimes we need to embed storybook on the site and here we face the problem of syncing links between the external site and storybook iframe.
Author: Eugene Tropin
Latest version: 1.1.4

# @storybook-addons/sync-external-url &middot; [![npm (scoped)](https://img.shields.io/npm/v/@storybook-addons/sync-external-url.svg)](https://www.npmjs.com/package/@storybook-addons/sync-external-url)

Sometimes we need to embed storybook on the site and here we face the problem of syncing links between the external site and storybook iframe.

## Install

```bash
npm i -D @storybook-addons/sync-external-url
```

## Usage

Firstly we need register addon in your storybook:

```js
import '@storybook-addons/sync-external-url/register'
```

### Trigger event from change custom tab

If you have addon with custom tab you can wrap Panel with `withFireEvents` for triggering event after tab changed:

```js
import React from 'react'
import addons, { types } from '@storybook/addons'
import { withFireEvents } from '@storybook-addons/sync-external-url'

const Panel = withFireEvents(() => <div>Panel content</div>)

addons.register('addon-id', (api) => {
  addons.add('panel-id', {
    type: types.TAB,
    title: 'Tab title',
    route: ({ storyId }) => `/tab/${storyId}`,
    match: ({ viewMode }) => viewMode === 'tab',
    render: ({ active }) => <Panel api={api} active={active} />,
  })
})
```

### Embeded storybook with iframe

After iframe loading we listen post-mesages and update external url also wee load storybook with current query params:

```js
import React from 'react'
import { IframeLoader } from '@storybook-addons/sync-external-url'

export const App = () => (
  <IframeLoader queryPrefix="storybook" frameBorder={0} src="https://your-storyboook.com" />
)
```

## License

Project is [MIT licensed](https://github.com/yarastqt/mercury/blob/master/LICENSE.md).
npm package: @storybook-extras/console
Description: Storybook addon for displaying console logs in `Actions` panel.
Author: Mostafa Sherif
Latest version: 0.0.68

<div align="center">

<img src="https://raw.githubusercontent.com/sheriffMoose/storybook-extras/master/logos/console.svg" alt="logo" width="200" />

<h1>Storybook Console Logs</h1>

<p>Storybook addon for displaying console logs in `Actions` panel.</p>

![][img.node]
![][img.npm]
[![][img.storybook]][link.npm]

[![][img.banner]][link.npm]

</div>

<h2>Table of Contents</h2>

- [Getting started](#getting-started)
- [How to use](#how-to-use)

## Getting started

1. Install the addon:

```shell
yarn add @storybook-extras/console -D
```

1. Add the addon

```ts
// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';

const config: StorybookConfig & ExtrasConfig = {
    ...
    "addons": [
        "@storybook-extras/console",
        ...
    ],
    ...
}

export default config;
```

## How to use

-   This addon uses the `Actions` panel from `@storybook/addon-actions` to display the console output.
-   This is helpful if you need to focus on the console output of the application.
-   To enable the addon, you need to add the `console` property to the `parameters` object in the `preview.js` file.

```ts
// .storybook/preview.ts
export const parameters = {
    console: {
        disable: false,
        patterns: [/^dev$/],
        omitFirst: true,
    },
};
```

Currently, the patterns property is used to match the first argument of the `console` methods `debug`, `log`, `info`, `warn`& `error`. This allows developers to use special context for their app logs. For example: `console.log('dev', data);` will be matched using the `/^dev$/` pattern, and will trigger an action that shows up in the `Actions` panel. You can use the `omitFirst` property to make sure the `dev` item does not show, only other arguments will show up.




[img.node]:
https://img.shields.io/node/v/@storybook-extras/console?logo=node.js&logoColor=white&labelColor=339933&color=grey&label=
[img.npm]:
https://img.shields.io/npm/v/@storybook-extras/console?logo=npm&logoColor=white&labelColor=CB3837&color=grey&label=

[img.storybook]:
https://img.shields.io/npm/dependency-version/@storybook-extras/console/dev/storybook?logo=storybook&logoColor=white&labelColor=FF4785&color=grey&label=

[img.banner]:
https://nodei.co/npm/@storybook-extras/console.png

[link.npm]:
https://npmjs.org/package/@storybook-extras/console
npm package: @storybook-extras/swagger
Description: Storybook addon for Swagger UI.
Author: Mostafa Sherif
Latest version: 0.0.68

<div align="center">

<img src="https://raw.githubusercontent.com/sheriffMoose/storybook-extras/master/logos/swagger.svg" alt="logo" width="200" />

<h1>Storybook Swagger UI</h1>

<p>Storybook addon for displaying story for Swagger UI for backend APIs documentation & testing.</p>

![][img.node]
![][img.npm]
[![][img.storybook]][link.npm]

[![][img.banner]][link.npm]

</div>

<h2>Table of Contents</h2>

- [Getting started](#getting-started)
- [How to use](#how-to-use)

## Getting started

1. Install the addon:

```shell
yarn add @storybook-extras/swagger -D
```

1. Add the addon

```ts
// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';

const config: StorybookConfig & ExtrasConfig = {
    ...
    "addons": [
        "@storybook-extras/swagger",
        ...
    ],
    ...
}

export default config;
```

## How to use

- OpenAPI (formly Swagger) is a popular specification for the management of RESTful APIs. Usually OpenAPI produces a `openapi.yml` or `openapi.json` file that can be used to integrate/visualize the APIs configured on the backend server.

- `Swagger UI` is a popular framework for the visualization of the `openapi.yml|json` files that allow comprehensive documentation + testing for the backend API services. 

- Thanks to the pre available `swagger-ui-react`, this feature simply integrates `SwaggerUI` component into one `.mdx` file and make it available on demand if the user decides to populate the `url` option when configuring the addon like so:

**EXPERIMENTAL FEATURE**
For the current time being, the `stories` property is working with only one item. We are working on this feature to allow multiple endpoints and hopefully more configuration items in the near future releases.


```ts
// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';

const config: StorybookConfig & ExtrasConfig = {
    addons: [
        {
            name: '@storybook-extras/swagger',
            options: {
                stories: [
                    {
                        title: 'Swagger UI',
                        url: 'https://petstore3.swagger.io/api/v3/openapi.json',
                    },
                ],
            }
        }
    ]
}

export default config;
```

[img.node]:
https://img.shields.io/node/v/@storybook-extras/swagger?logo=node.js&logoColor=white&labelColor=339933&color=grey&label=
[img.npm]:
https://img.shields.io/npm/v/@storybook-extras/swagger?logo=npm&logoColor=white&labelColor=CB3837&color=grey&label=

[img.storybook]:
https://img.shields.io/npm/dependency-version/@storybook-extras/swagger/dev/storybook?logo=storybook&logoColor=white&labelColor=FF4785&color=grey&label=

[img.banner]:
https://nodei.co/npm/@storybook-extras/swagger.png

[link.npm]:
https://npmjs.org/package/@storybook-extras/swagger
npm package: @storybook-extras/toolbars
Description: Storybook addon for adding custom toolbar buttons.
Author: Mostafa Sherif
Latest version: 0.0.68

<div align="center">

<img src="https://raw.githubusercontent.com/sheriffMoose/storybook-extras/master/logos/toolbars.svg" alt="logo" width="200" />

<h1>Toolbar Buttons</h1>

<p>Storybook addon for adding custom toolbar buttons.</p>

![][img.node]
![][img.npm]
[![][img.storybook]][link.npm]

[![][img.banner]][link.npm]

</div>

<h2>Table of Contents</h2>

- [Getting started](#getting-started)
- [How to use](#how-to-use)

## Getting started

1. Install the addon:

```shell
yarn add @storybook-extras/toolbars -D
```

1. Add the addon

```ts
// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';

const config: StorybookConfig & ExtrasConfig = {
    ...
    "addons": [
        "@storybook-extras/toolbars",
        // it will be included automatically if you are using
        // "@storybook-extras/preset",
        ...
    ],
    ...
}

export default config;
```

## How to use

- Simply enable the toolbars through the toolbar or using the parameters like so:

```ts
// .storybook/preview.ts
// button.stories.ts
parameters: {
    toolbars: [
        {
            key:'myToolbar',
            title:'My Toolbar',
            icon:'globe',
            // OR emoji: '🌍',
        },
    ],
};
```




[img.node]:
https://img.shields.io/node/v/@storybook-extras/toolbars?logo=node.js&logoColor=white&labelColor=339933&color=grey&label=
[img.npm]:
https://img.shields.io/npm/v/@storybook-extras/toolbars?logo=npm&logoColor=white&labelColor=CB3837&color=grey&label=

[img.storybook]:
https://img.shields.io/npm/dependency-version/@storybook-extras/toolbars/dev/storybook?logo=storybook&logoColor=white&labelColor=FF4785&color=grey&label=

[img.banner]:
https://nodei.co/npm/@storybook-extras/toolbars.png

[link.npm]:
https://npmjs.org/package/@storybook-extras/toolbars
npm package: @storybook-nuxt/cli
Description: Storybook's CLI - easiest method of adding storybook to your projects
Author: Storybook Team
Latest version: 7.4.0-alpha.2.4

# Storybook CLI

Storybook CLI (_Command Line Interface_) is the easiest way to add [Storybook](https://github.com/storybookjs/storybook) to your project.

![Screenshot](docs/getstorybook.png)

Go to your project and run:

```sh
cd my-app
npx sb init
```

In addition to `init`, the CLI also has other commands:

- `add` - add an addon and register it
- `info` - print out system information for bug reports
- `migrate` - run codemods to migrate your code

See the command-line help with `-h` for details.

---

## [Yarn](https://github.com/yarnpkg/yarn) support

The CLI supports yarn. If you have installed yarn in your system and your project has a `yarn.lock` file, it'll detect it and use `yarn` to install dependencies.

If you don't want to use `yarn` always you can use the `--package-manager` option like this:

```sh
npx sb init --package-manager=npm
```

If you would like to force a particular version of yarn, you can use the `--package-manager` flag with a value of `yarn1` or `yarn2`.

---

## [PNPM](https://pnpm.io/) support

The CLI supports pnpm. If you have installed pnpm in your system and your project has a `pnpm-lock.yaml` file, it'll detect it and use `pnpm` to install dependencies.

If you don't have a lock file and would like to force pnpm to be used, you can use the `--package-manager` option like this:

```sh
npx sb init --package-manager=pnpm
```

---

## [Flow](https://flow.org/) support

It also supports flow files. By default, [jscodeshift](https://github.com/facebook/jscodeshift), the tool used to transform the source files, uses babel to read the files. To be able to transform any flow annotated file, you need to use the flow parser.

```sh
npx sb init --parser flow
```

For more information visit: [storybook.js.org](https://storybook.js.org)

---

## Manually specify project type

If the CLI cannot detect your project type, it will ask you. You can also force it to use a particular project type:

```sh
npx sb init --type <type>
```

Where type is one of the project types defined in [project_types.ts](https://github.com/storybookjs/storybook/blob/next/code/lib/cli/src/project_types.ts)
npm package: @storybook-nuxt/framework
Description: Storybook for Nuxt and Vite: Develop Vue3 components in isolation with Hot Reloading.
Latest version: 0.0.2-beta.4

# Storybook for Nuxt framework <!-- omit in toc -->


![sb-nuxt (2)](https://github.com/storybook-vue/nuxt/assets/711292/6cd06c77-1b6e-4a45-9666-a97d091a27c0)


Storybook package for [**Nuxt framework**](https://nuxt.com/) with zero configs. seamless integration supporting all Nuxt fancy features 



https://github.com/storybook-vue/nuxt/assets/711292/e66a1899-ab7c-42dd-b358-59e22ff0f609



## Supported Features

👉 [Nuxt Modules](#nuxts-image-component)

👉 [Nuxt Plugins](#nuxt-font-optimization)

👉 [All in-built Nuxt Components](#nuxt-components)

👉 [Sass/Scss](#sassscss)

👉 [Css/Sass/Scss Modules](#csssassscss-modules)

👉 [ JSX ](#styled-jsx)

👉 [Postcss](#postcss)

👉 [Auto Imports](#auto-imports)

👉 [Runtime Config](#runtime-config)

👉 [Composables](#composables)

👉 [Typescript](#typescript) (already supported out of the box by Storybook)

👉 [Nuxt DevTools](https://devtools.nuxtjs.org/) : finally as Bonus, Nuxt DevTools works amazingly with your Storybook, full features


https://github.com/storybook-vue/nuxt/assets/711292/63cc1fb3-ec6b-4df2-ad61-d87e5692f385



## Requirements

- [Nuxt](https://nuxt.com/) >= 3.x
- [Storybook](https://storybook.js.org/) >= 7.x

## Demo 

Checkout the demo repo [storybook7-nuxt3-demo](https://github.com/storybook-vue/storybook-nuxt-demo)
or  try it on [Stackblitz](https://stackblitz.com/~/github.com/storybook-vue/storybook-nuxt-demo)

## Getting Started

### In a project without Storybook

Follow the prompts after running this command in your Nuxt project's root directory:

```bash
npx storybook-nuxt init
```

[More on getting started with Storybook](https://storybook.js.org/docs/vue3/get-started/install)

#### Automatic migration

When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook-vue/nuxt`, which should handle everything for you. In case auto-migration does not work for your project, refer to the manual migration below.



Update your `main.js` to change the framework property:

```js
// .storybook/main.js
export default {
  // ...
  framework: {
    name: '@storybook-vue/nuxt', // Add this
    options: {},
  },
}
```

## Documentation

In progress

## License

This repository is licensed under the [MIT License](LICENSE). Feel free to use the code and modify it according to your needs.

## Contacts :

🔖 Mail: javachakir@gmail.com

💬 Discord: ChakAs3

🐦‍⬛ Twitter: [@ChakirQatab](https://twitter.com/ChakirQatab)