open-index/open-npm huggingface dataset:
npm package: @storybook-nuxt/vue3-vite
Description: Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.
Latest version: 7.4.0-alpha.6

# Storybook for Vue 3 and Vite

Storybook for Vue 3 is a UI development environment for your Vue 3 components.
With it, you can visualize different states of your UI components and develop them interactively.

![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)

Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

## Getting Started

```sh
cd my-vue3-app
npx storybook@latest init
```

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

---

Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.

## Extending the Vue application

Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview.
When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.

Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.

```js
// .storybook/preview.js

import { setup } from '@storybook/vue3';

setup((app) => {
  app.use(MyPlugin);
  app.component('my-component', MyComponent);
  app.mixin({
    /* My mixin */
  });
});
```
npm package: @storybook-tiny/preact
Description: A tiny storybook for preact
Author: commenthol
Latest version: 1.0.5

# @storybook-tiny/preact

A tiny storybook for [preact][].

# usage

initial setup:

```sh
# add to your project
npm i preact
npm i -D @storybook-tiny/preact

# install storybook template auto-detecting your package-manager
npx storybook-tiny
# or with pnpm
npx storybook-tiny -p pnpm
```

define some stories:

```js 
import Storybook from '@storybook-tiny/preact'
import { render } from 'preact'

// describe your stories...
const storyButton = {
  title: 'Button',
  component: () => <button onClick={() => alert('Hi')}>Click Me</button>
}

// define stories in storybook
render(
  <Storybook
    stories={[
      <small key="1">Components</small>, 
      storyButton
    ]}
  />,
  document.getElementById('app')
)
```

Then run with vite:

```sh
npx vite --open /stories/
```

# license

MIT licensed

[preact]: https://preactjs.com/tutorial/
npm package: @storybook-tiny/react
Description: A tiny storybook for react
Author: commenthol
Latest version: 1.0.5

# @storybook-tiny/react

A tiny storybook for [react][].

# usage

initial setup:

```sh
# add to your project
npm i react react-dom
npm i -D @storybook-tiny/react

# install storybook template auto-detecting your package-manager
npx storybook-tiny
# or with pnpm
npx storybook-tiny -p pnpm
```

define some stories:

```js 
import Storybook from '@storybook-tiny/react'
import React from 'react'
import ReactDOM from 'react-dom/client'

// describe your stories...
const storyButton = {
  title: 'Button',
  component: () => <button onClick={() => alert('Hi')}>Click Me</button>
}

// define stories in storybook
ReactDOM.createRoot(document.getElementById('app')).render(
  <React.StrictMode>
    <Storybook
      stories={[
        <small key="1">Components</small>,
        storyButton
      ]}
    />
  </React.StrictMode>
)
```

Then run with vite:

```sh
npx vite --open /stories/
```

# license

MIT licensed

[react]: https://reactjs.org/tutorial/tutorial.html
npm package: @storybook-tiny/solid-js
Description: A tiny storybook for solid-js
Author: commenthol
Latest version: 1.0.6

# @storybook-tiny/solid-js

A tiny storybook for [solid-js][].

# usage

initial setup:

```sh
# add to your project
npm i solid-js
npm i -D @storybook-tiny/solid-js

# install storybook template auto-detecting your package-manager
npx storybook-tiny
# or with pnpm
npx storybook-tiny -p pnpm
```

define some stories:

```js 
import Storybook from '@storybook-tiny/solid-js'
import { render } from 'solid-js/web'

// describe your stories...
const storyButton = {
  title: 'Button',
  component: () => <button onClick={() => alert('Hi')}>Click Me</button>
}

// define stories in storybook
render(
  () => (
    <Storybook
      stories={[
        <small>Components</small>,
        storyButton
      ]} 
    />
  ),
  document.getElementById('app')
)
```

Then run with vite:

```sh
npx vite --open /stories/
```

# license

MIT licensed

[solid-js]: https://docs.solidjs.com/
npm package: @storybook-tiny/svelte
Description: A tiny storybook for svelte 5
Author: commenthol
Latest version: 2.0.3

# @storybook-tiny/svelte

A tiny storybook for [svelte 5][].

# usage

initial setup:

```sh
# add to your project
npm i svelte
npm i -D @storybook-tiny/svelte

# install storybook template auto-detecting your package-manager
npx storybook-tiny
# or with pnpm
npx storybook-tiny -p pnpm
```

define some stories (e.g. in `./stories/Stories.svelte`):

```html
<script>
  import Storybook from '@storybook-tiny/svelte/src/Storybook.svelte'
  import ButtonStory from './Button.svelte'

  const stories = [
    '<small>Component</small>',
    {
      title: 'Button',
      component: ButtonStory
    }
  ]
</script>

<Storybook {stories} />
```

Then run with vite:

```sh
npx vite --open /stories/
```

# license

MIT licensed

[svelte 5]: https://sveltejs.com/tutorial/
npm package: @storybook-tiny/vanjs
Description: A tiny storybook for vanjs
Author: commenthol
Latest version: 1.0.6

# @storybook-tiny/vanjs

A tiny storybook for [vanjs][].

# usage

initial setup:

```sh
# add to your project
npm i vanjs-core 
npm i -D @storybook-tiny/vanjs

# install storybook template auto-detecting your package-manager
npx storybook-tiny
# or with pnpm
npx storybook-tiny -p pnpm
```

define some stories:

```js
import Storybook from '@storybook-tiny/vanjs'
import van from 'vanjs-core'

const { small } = van.tags

// describe your stories...
const storyButton = {
  title: 'Button',
  component: () => van.tags.button({ onclick: () => alert('Hi') }, 'Click me')
}

// define stories in storybook
van.add(
  document.getElementById('app'),
  Storybook({
    stories: [
      small('Components'),
      storyButton
    ]
  })
)
```

Then run with vite:

```sh
npx vite --open /stories/
```

# license

MIT licensed

[vanjs]: https://vanjs.org/
npm package: @storybook-tiny/vue
Description: A tiny storybook for vue
Author: commenthol
Latest version: 1.0.5

# @storybook-tiny/vue

A tiny storybook for [Vue.js][].

# usage

initial setup:

```sh
# add to your project
npm i vue 
npm i -D @storybook-tiny/vue

# install storybook template auto-detecting your package-manager
npx storybook-tiny
# or with pnpm
npx storybook-tiny -p pnpm
```

define some stories (e.g. in `some.stories.js`):

```js
import Counter from './Counter.vue'

const Button = {
  setup() {
    const handleClick = () => alert('Hi')
    return { handleClick }
  },
  template: '<button @click="handleClick">Click me</button>'
}

export const storyButton = {
  title: 'Button',
  component: Button
}

export const storyCounter = {
  component: Counter
}
```

define stories in `Stories.vue`

```html
<script setup>
  import Storybook from '@storybook-tiny/vue/src/Storybook.vue'
  import { storyButton, storyCounter } from './some.stories'

  const stories = [
    '<small>Component</small>', 
    storyButton, 
    storyCounter
  ]
</script>

<template>
  <Storybook :stories="stories"></Storybook>
</template>
```

Then run with vite:

```sh
npx vite --open /stories/
```

# license

MIT licensed

[Vue.js]: https://vuejs.org/tutorial
npm package: @storybook-tiny/webcomponent
Description: A tiny storybook for web-components
Author: commenthol
Latest version: 1.2.1

# @storybook-tiny/webcomponent

A tiny storybook for [webcomponents][].

# usage

initial setup:

```sh
# add to your project
npm i -D @storybook-tiny/webcomponent

# install storybook template auto-detecting your package-manager
npx storybook-tiny
# or with pnpm
npx storybook-tiny -p pnpm
```

define some stories:

```js
import '@storybook-tiny/webcomponent'

// define some custom elements
window.customElements.define('x-text', class extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'closed' })
    shadow.innerHTML = `<h1>It works!</h1>`
  }
})

// describe your stories...
const storyText = {
  title: 'Text',
  component: '<p>Some Text</p>' // component is mounted with .innerHTML
}

const storyXtext = {
  title: 'x-text',
  component: () => document.createElement('x-text')
}

// define stories in storybook
const storybook = document.createElement('storybook-tiny')
storybook.stories = [
  '<small>Components</small>',
  storyText,
  storyXtext
]
document.getElementById('app').appendChild(storybook)
```

Then run with vite:

```sh
npx vite --open /stories/
```

# license

MIT licensed

[webcomponents]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components
npm package: @storybook-vue/blocks
Description: Storybook Doc Blocks
Latest version: 7.1.0-alpha.41.4

# Storybook Doc Blocks

Portable documentation components for building design systems in Storybook.

## Blocks development

To bootstrap, in the monorepo root:

```sh
yarn start
```

To develop this package, in the monorepo root:

```sh
yarn build blocks --watch
```

To run storybook, in this directory:

```sh
yarn storybook
```
npm package: @storybook-vue/cli
Description: Storybook's CLI - easiest method of adding storybook to your projects
Author: Storybook Team
Latest version: 7.2.0-beta.0

# 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-vue/nuxt-storybook
Description: Storybook module for Nuxt
Latest version: 0.0.1-latest.7


![sb-nuxt-github (1)](https://github.com/storybook-vue/nuxt-storybook/assets/711292/7e64e6cc-7d03-469d-91e6-48fa6754a52f)

# nuxt-storybook

Storybook Module for Nuxt Framework

> [Storybook](http://storybookjs.org) module for [Nuxt](https://nuxtjs.org)
>
## Installing

`pnpm add @storybook-vue/nuxt-storybook -D`

update your nuxt.config

```ts
  modules: [
    '@storybook-vue/nuxt-storybook',
  ],
  storybook: {
    url: 'http://localhost:6006',
    storybookRoute: '/__storybook__',
    port: 6006,
  },
```

`pnpm dev`

## Contributing

1. Install dependencies with `pnpm`.
2. Run `pnpm dev:prepare` to generate stubbed `dist` directory.
3. Make your changes.
4. Run `pnpm lint`  to verify that there is no issues (consider adding tests).
5. Submit a PR.

## License

[MIT License](./LICENSE)
npm package: @storybook/addon-comments
Description: Comments addon for Storybook
Latest version: 3.2.19

# Storybook Comments Addon

[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)

* * *

> THIS ADDON IS CURRENTLY NOT WORKING - NOT MAINTAINED

* * *

Storybook Comments Addon allows you to add comments for your stories in [Storybook](https://storybook.js.org).

This addon works with Storybook for:
[React](https://github.com/storybooks/storybook/tree/master/app/react).

![Screenshot](docs/screenshot.png)

## Getting Started

First, install the addon

```sh
npm install -D @storybook/addon-comments
```

Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).

```js
import '@storybook/addon-comments/register';
```
npm package: @storybook/addon-cssresources
Description: everything you need to build a Storybook addon
Author: winkerVSbecks
Latest version: 7.0.0

# Storybook Addon Cssresources

Switch between CSS resources at runtime, and define per-story CSS resources.

[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)

![Storybook Addon Cssresources Demo](https://raw.githubusercontent.com/storybookjs/addon-cssresources/refs/heads/main/docs/demo.gif)

## Installation

Install the addon:

```sh
yarn add -D @storybook/addon-cssresources
```

```sh
npm i -D @storybook/addon-cssresources
```

```sh
pnpm i -D @storybook/addon-cssresources
```

## Configuration

Then add the addon to your Storybook config:

```ts
// .storybook/main.ts
import { defineMain } from '@storybook/<your-framework>/node';

const config = defineMain({
  addons: ['@storybook/addon-cssresources'],
  framework: '@storybook/react-vite',
});

export default config;
```

## Usage

Define the CSS resources you want to use in your [`parameters`](https://storybook.js.org/docs/writing-stories/parameters). They can be added globally or per story.

You can choose which resources get loaded by default in the parameters, and then unload or load other resources in the addon panel UI.

If you use [CSF Next](https://storybook.js.org/docs/api/csf/csf-next), load the addon in `preview.ts` as well:

```ts
// .storybook/preview.ts
import { definePreview } from '@storybook/<your-framework>';
import addonDocs from '@storybook/addon-docs';
import addonCssResources from '@storybook/addon-cssresources';

export default definePreview({
  addons: [addonDocs(), addonCssResources()], // only if using CSF Next
  parameters: {
    cssresources: [
      {
        // Label shown in the addon panel UI
        id: `bootstrap v5.0.2`,
        // Code to use to load the resource
        code: `<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" crossorigin="anonymous"></link>`,
        // Defines which resources will be initially loaded in the story
        picked: true,
        // Defaults to false, this enables you to hide the code snippet and only displays the style selector
        hideCode: false,
      },
      {
        id: `bootstrap v4.1.3`,
        code: `<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" crossorigin="anonymous"></link>`,
        picked: false,
        hideCode: false,
      },
    ],
  },
});
```

## Credits

While this addon was part of the [Storybook monorepo](https://github.com/storybookjs/storybook), it received commits from the following authors:

> Aaron Reisman,
> Andrew Lisowski,
> Armand Abric,
> Brody McKee,
> Clément DUNGLER,
> Gaëtan Maisse,
> Grey Baker,
> Jean-Philippe Roy,
> Jimmy Somsanith,
> Jon Palmer,
> Lynn Chyi,
> Michael Shilman,
> Michaël De Boey,
> Neville Mehta,
> Norbert de Langen,
> Paul Rosania,
> Preston Goforth,
> Renovate Bot,
> Simen Bekkhus,
> Tom Coleman,
> Tomi Laurell,
> Varun Vachhar
npm package: @storybook/addon-designs
Description: Storybook addon for embedding your design preview in addon panel
Author: pocka
Latest version: 11.1.3

<div align="center">
  
  <img src="./packages/examples/assets/logo.png" width="104" alt="logo">
  <br/>
  <br/>

[![npm version](https://badge.fury.io/js/@storybook%2Faddon-designs.svg)](https://badge.fury.io/js/@storybook%2Faddon-designs)
[![Monthly download](https://img.shields.io/npm/dm/@storybook/addon-designs.svg)](https://www.npmjs.com/package/@storybook/addon-designs)
[![GitHub license](https://img.shields.io/github/license/storybookjs/addon-designs.svg)](https://github.com/storybookjs/addon-designs/blob/master/LICENSE)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

</div>

<hr/>

## @storybook/addon-designs

A [Storybook](https://github.com/storybooks/storybook) addon that embed Figma or websites in the addon panel for better design-development workflow.

- [Docs & Demo](https://storybookjs.github.io/addon-designs)

## Requirements

- Storybook@>=10.0.0
- This addon should work well with any framework. If you find that the addon does not work, please open an issue.

### Version compatibility

| Addon designs version | Storybook version |
| --------------------- | ----------------- |
| ^11.0.0               | ^10.0.0           |
| ^10.0.0               | ^9.0.0            |
| ^9.0.0                | ^9.0.0            |
| ^8.0.0                | ^8.0.0            |
| ^7.0.0                | ^7.0.0            |

## Getting started

### 1. Install

```sh
npm install -D @storybook/addon-designs

yarn add -D @storybook/addon-designs

pnpm add -D @storybook/addon-designs
```

### 2. Register the addon in `main.js`

```js
export default {
  addons: ["@storybook/addon-designs"],
};
```

### 3. Add it to story!

```js
const meta = {
  title: "My stories",
  component: Button,
};
export default meta;

export const MyStory = {
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
    },
  },
};
```

## Similar projects

- Adobe XD: [storybook-addon-xd-designs](https://github.com/morgs32/storybook-addon-xd-designs)
- Zeplin: [storybook-zeplin](https://github.com/mertkahyaoglu/storybook-zeplin)
- Abstract: [storybook-addons-abstract](https://github.com/amccloud/storybook-addons-abstract)
npm package: @storybook/addon-mcp
Description: Help agents automatically write and test stories for your UI components
Author: Storybook Core Team
Latest version: 0.5.0

# Storybook MCP Addon

Storybook addon for MCP-powered UI development workflows.

<div align="center">
	<img src="./addon-mcp-claude-code-showcase.gif" alt="Storybook MCP Addon Demo" />
</div>

See [documentation](https://storybook.js.org/docs/next/ai/mcp/overview/?ref=readme) for installation instructions, usage examples, APIs, and more.

Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).
npm package: @storybook/addon-notes
Description: Write notes for your Storybook stories.
Latest version: 5.3.21

# Storybook Addon Notes

Storybook Addon Notes allows you to write notes (text or HTML) for your stories in [Storybook](https://storybook.js.org).

[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)

![Storybook Addon Notes Demo](docs/demo.png)

## Getting Started

**NOTE: Documentation on `next` branch is for alpha version, stable release is on [master](https://github.com/storybookjs/storybook/tree/master/addons/)**

```sh
yarn add -D @storybook/addon-notes
```

within `.storybook/main.js`:

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

Alternatively register the notes addon into a panel. Choose only one, not both.

```js
module.exports = {
  addons: ['@storybook/addon-notes/register-panel']
}
```

Now, you can use the `notes` parameter to add a note to each story.


```js
import Component from './Component';

export default {
  title: 'Component',
  parameters: {
    notes: 'some documentation here',
  },
};
```

### Upgrading to CSF Format

Add `notes` to the `parameters` object:

```js
export default {
  parameters: {
    notes: 'My notes',
  }
}
```

## Using Markdown

Using Markdown in your notes is supported, Storybook will load Markdown as raw by default.

```js
import Component from './Component';
import markdown from './someMarkdownText.md';

export default {
  title: 'Component',
};

export const withMarkdown = () => <Component />;
withmarkdown.story = {
  parameters: {
    notes: { markdown },
  }
};
```

## Giphy

When using Markdown, you can also embed gifs from Giphy into your Markdown. Currently, the value `cheese` of the query prop is used to search and return the first result returned by Giphy.

```md
# Title

<Giphy query='cheese' />
```

## Multiple Notes Sections

If you need to display different notes for different consumers of your storybook (e.g design, developers), you can configure multiple notes pages. The following will render a tab with unique notes for both `Introduction` and `Design`.

```js
import { storiesOf } from '@storybook/react';
import Component from './Component';

import intro from './intro.md';
import design from './design.md';

export default {
  title: 'Component',
  parameters: {
    notes: { Introduction: intro, 'Design Notes': design },
  },
};
```
npm package: @storybook/addon-ondevice-knobs
Description: Display storybook story knobs on your deviced.
Latest version: 7.6.20

# Storybook Knobs Addon for react-native

This addon is depcrecated in favour of controls, please only use it for transitioning to CSF, Args and Controls

See [examples for migrating from Knobs to Controls](https://github.com/storybookjs/storybook/blob/next/code/addons/controls/README.md#how-do-i-migrate-from-addon-knobs) in the web Controls Addon README.

Storybook Knobs Addon allows you to edit react props using the Storybook UI using variables inside stories in [Storybook](https://storybook.js.org).

[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)

**This is a wrapper for the addon @storybook/addon-knobs Refer to its documentation to understand how to use knobs**

## Installation

```sh
yarn add -D @storybook/addon-ondevice-knobs @storybook/addon-knobs  @react-native-community/datetimepicker @react-native-community/slider
```

## Configuration

Add following content to `.storybook/main.ts`:

```ts
import { StorybookConfig } from '@storybook/react-native';

const main: StorybookConfig = {
  addons: ['@storybook/addon-ondevice-knobs'],
};

export default main;
```

Make sure to use the withKnobs decorator when using knobs `import { withKnobs } from '@storybook/addon-ondevice-knobs';`
npm package: @storybook/addon-postcss
Description: Storybook addon used to run the PostCSS preprocessor against your stories.
Latest version: 2.0.0

# Storybook Addon PostCSS

The Storybook PostCSS addon can be used to run the PostCSS preprocessor against your stories in [Storybook](https://storybook.js.org).

## Getting Started

Install this addon by adding the `@storybook/addon-postcss` dependency:

```sh
yarn add -D @storybook/addon-postcss
```

within `.storybook/main.js`:

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

and create a PostCSS config in the base of your project, like `postcss.config.js`, that contains:

```js
module.exports = {
  // Add your installed PostCSS plugins here:
  plugins: [
    // require('autoprefixer'),
    // require('postcss-color-rebeccapurple'),
  ],
};
```

## PostCSS 8+

If your project requires you to be using PostCSS v8, you can replace the included PostCSS by passing `postcssLoaderOptions` to this addon.

First, you'll need to install PostCSS v8 as a dependency of your project:

```sh
yarn add -D postcss@^8
```

Then, you'll need to update your addons config. Within `.storybook/main.js`:

```diff
module.exports = {
  addons: [
-   '@storybook/addon-postcss',
+   {
+     name: '@storybook/addon-postcss',
+     options: {
+       postcssLoaderOptions: {
+         implementation: require('postcss'),
+       },
+     },
+   },
  ]
}
```

When running Storybook, you'll see the version of PostCSS being used in the logs. For example:

```sh
info => Using PostCSS preset with postcss@8.2.4
```

## Loader Options

You can specify loader options for `style-loader`, `css-loader`, and `postcss-loader` by passing options to this addon as `styleLoaderOptions`, `cssLoaderOptions`, or `postcssLoaderOptions` respectively.

You can also configure the loader rule by overriding the `rule` option.
npm package: @storybook/addon-queryparams
Description: Mock query params in Storybook
Author: Storybook
Latest version: 10.0.0

# @storybook/addon-queryparams

> [!NOTE]
> This addon is now community-maintained. It was previously maintained by the Storybook team.

This Storybook addon can be helpful if your components need special query parameters to work the way you want them to. It allows you to mock query params per story so that you can easily reproduce different states of your component.

## Getting started

First, install the addon.

```sh
$ npx storybook@latest add @storybook/addon-queryparams
```

In your story, define the query parameters you want to mock via the `query` special parameter:

```tsx
// src/stories/Button.stories.tsx
import React from 'react';
import { Button } from '../Button';

export default {
  component: Button,
  parameters: {
    query: {
      // example of mocking ?greeting="Hello world!"
      greeting: 'Hello world!',
    },
  },
};

export const WithMockedSearch = {
  render: () => {
    const urlParams = new URLSearchParams(document.location.search);
    const mockedParam = urlParams.get('greeting');
    return <div>Mocked value: {mockedParam}</div>;
  },
};
```

## CSF Next support

For CSF Next annotations, import the addon in your `preview.ts`:

```ts
// .storybook/preview.ts
import { definePreview } from '@storybook/your-framework';
import addonDocs from '@storybook/addon-docs';
import addonQueryParams from '@storybook/addon-queryparams';

export default definePreview({
  addons: [addonDocs(), addonQueryParams()],
});
```

## Credits

While this addon was part of the [Storybook monorepo](https://github.com/storybookjs/storybook), it received commits from the following authors:

> Andrew Lisowski,
> Brody McKee,
> Clément DUNGLER,
> Filipp Riabchun,
> Gaëtan Maisse,
> Gert Hengeveld,
> Jon Palmer,
> Lynn Chyi,
> Michael Shilman,
> Norbert de Langen,
> Paul Rosania,
> Renovate Bot,
> Tom Coleman,
> Varun Vachhar,
> Yann Braga
npm package: @storybook/addon-react-native-server
Description: Sync up multiple devices via websockets
Author: Daniel Williams
Latest version: 1.0.1

# Storybook Addon React Native Server

Sync up multiple devices via websockets

## Installation

Note that this package is intended for storybook 7 and newer.

First, install the package.

```sh
npm install --save-dev @storybook/addon-react-native-server
```

Then, register it as an addon in `.storybook/main.js`.

```js
// .storybook/main.ts

const config = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    '@storybook/addon-react-native-server', // 👈 register the addon here
  ],
  reactNativeServerOptions: {
    host: "localhost",
    port: 7007,
  },
};

export default config;
```

## Usage

Once you have the addon installed it automatically starts a websocket server to listen to events from your mobile devices. You must have reactNativeServerOptions defined and be in development mode for the server to start.

Once the server is running you can reload your mobile device to make sure it connects to the websocket server.

You can also use @storybook/addon-react-native-web to make sure the web version of your stories renders in the browser.

You can use the deviceOnly parameter to avoid rendering some or all stories depending on if you add the parameter at the story or global level.

```
parameters: { deviceOnly: true },
```

## Development

### Development scripts

- `npm run start` runs bundling in watch mode and starts Storybook
- `npm run build` build and package your addon code

Code for the server is located in src/preset.ts.
npm package: @storybook/addon-webpack5-compiler-babel
Description: Adds babel as a Webpack5 compiler to Storybook
Author: Storybook Bot
Latest version: 4.0.1

# @storybook/addon-webpack5-compiler-babel

This addon adds babel support to Storybook's webpack5 compiler. It adds the `babel-loader` to the webpack config and sets the `babel-loader` as the default loader for JavaScript and TypeScript files.

## Installation

```sh
npx storybook@latest add @storybook/addon-webpack5-compiler-babel
```

## Requirements

- Storybook@>=10.0.0

### Version compatibility

| Addon coverage version | Storybook version |
| ---------------------- | ----------------- |
| ^4.0.0                 | ^10.0.0           |
| ^3.0.0                 | ^9.0.0            |
| ^3.0.0                 | ^8.0.0            |
npm package: @storybook/addon-webpack5-compiler-swc
Description: Adds SWC as a Webpack5 compiler to Storybook
Author: Storybook Bot
Latest version: 4.0.3

# @storybook/addon-webpack5-compiler-swc

This addon adds SWC support to Storybook's webpack5 compiler. It adds the swc-loader to the webpack config and sets the `swc-loader` as the default loader for JavaScript and TypeScript files.

## Installation

```sh
npx storybook@latest add @storybook/addon-webpack5-compiler-swc
```

## Configuration

Please go to https://storybook.js.org/docs/api/main-config-swc for more information about how to configure SWC.
npm package: @storybook/aem
Description: Storybook for AEM: View AEM components in isolation with hot reloading.
Latest version: 0.0.11

# Storybook for AEM

---

Storybook for AEM is a UI development environment for your plain AEM snippets.
With it, you can visualize different states of your UI components and develop them interactively.

![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)

Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
npm package: @storybook/babel-plugin-require-context-hook
Description: Babel plugin to replicate Webpack require.context
Author: Greg Smith
Latest version: 1.0.1

# babel-plugin-require-context-hook

> NOTE: This is a (hopefully temporary) fork of [babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook), which appears to be unmaintained.

## Usage

In your babelrc:

```
"plugins": [
	"@storybook/babel-plugin-require-context-hook"
]
```

Wherever you configure babel-register (your source file, a register script, etc):

```
require('@storybook/babel-plugin-require-context-hook/register')();
```

## How it works

The register script `@storybook/babel-plugin-require-context-hook/register` implements the function `require.context` with an extra parameter-- the directory in which the calling file resides-- and places that function on the global scope.

The Babel plugin `@storybook/babel-plugin-require-context-hook` rewrites all calls to `require.context` into calls to this global function, passing in `__dirname` as the extra parameter.
npm package: @storybook/eslint-config-storybook
Description: tiny wrapper because eslint really really wants a package name that contains eslint-config-
Author: Norbert de Langen
Latest version: 4.0.0

# @storybook/eslint-config-storybook

Thin wrapper around our @storybook/linter-config package, because eslint really really likes this package name for discoverability.

## Installation

You'll first need to install [ESLint](http://eslint.org):

```sh
# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev
```

Next, install `@storybook/eslint-config-storybook`:

```sh
# npm
npm install @storybook/eslint-config-storybook --save-dev

# yarn
yarn add @storybook/eslint-config-storybook --dev
```

## Usage

Add `@storybook/eslint-config-storybook` to the extends section of your `.eslintrc` configuration file.

```json
{
  "extends": ["@storybook/eslint-config-storybook"]
}
```

Then configure the rules you want to use under the rules section.

```json
{
  "rules": {
    "react/prop-types": "off"
  }
}
```
npm package: @storybook/expect
Description: Browser-compatible version of Jest's `expect`
Latest version: 28.1.3-5
Deprecated: In Storybook 8, this package functionality has been integrated to a new package called @storybook/test, which uses Vitest APIs for an improved experience. When upgrading to Storybook 8 with 'npx storybook@latest upgrade', you will get prompted and will get an automigration for the new package. Please migrate when you can.

# @storybook/expect

[![npm version](https://img.shields.io/npm/v/@storybook/expect?label=%40storybook%2Fexpect)](https://npmjs.com/package/@storybook/expect)

Browser-compatible version of Jest's [`expect`](https://jestjs.io/docs/expect).

## Installation

```sh
yarn add @storybook/expect
```

or

```sh
npm install @storybook/expect
```

## Usage

```js
import expect from "@storybook/expect"

expect(true).toBe(true)
```

## Documentation

👉 https://jestjs.io/docs/expect
npm package: @storybook/icons
Description: Icon library from the Storybook team
Author: cdedreuille
Latest version: 2.0.1

# Icons

<img src="public/cover.jpg" />

This library contains the icons used in Storybook and Chromatic apps and marketing sites. They are 14x14. To view the list of all available icons, please go to https://main--64b56e737c0aeefed9d5e675.chromatic.com/

## Install

npm:

```console
npm install @storybook/icons
```

yarn:

```console
yarn add @storybook/icons
```

pnpm:

```console
pnpm add @storybook/icons
```

## To Do

- [x] Export every single icon instead of a single component
- [x] Add stories for each component

## Generating new icons from Figma

First, set local environment variables:

```console
FIGMA_API_TOKEN=<YOUR_FIGMA_API_TOKEN>
FIGMA_FILE_ID=<FIGMA_FILE_ID>
FIGMA_CANVAS=Icons
```

Then, fetch all icons from Figma locally and create React components + stories automatically:

```console
pnpm generate-icons
```

Inspired by [this article](https://blog.certa.dev/generating-react-icon-components-from-figma).

## Developing

Watch and rebuild code with `tsup` and run Storybook to preview your UI during development:

```console
pnpm storybook
```

## Building

Build package with `tsup` for production:

```console
pnpm build
```
npm package: @storybook/jest
Description: Instrumented version of Jest for Storybook Interactions
Author: yannbf@gmail.com
Latest version: 0.2.3
Deprecated: In Storybook 8, this package functionality has been integrated to a new package called @storybook/test, which uses Vitest APIs for an improved experience. When upgrading to Storybook 8 with 'npx storybook@latest upgrade', you will get prompted and will get an automigration for the new package. Please migrate when you can.
npm package: @storybook/mantra-core
Description: Core API for Mantra
Latest version: 1.7.2

#mantra-core

Core API for Mantra.

### Introduction

This repo contains the core APP api where we create an mantra app and initialize it.

Also, this package contains exported functions from both [`react-komposer`](https://github.com/kadirahq/react-komposer) and [`react-simple-di`](https://github.com/kadirahq/react-simple-di).
That's purely for the ease of use.

### Installation

```
npm i --save mantra-core react
```

### App API

```js
import MyComp from './myComp';
import {createApp} from 'mantra-core';

// Here's a simple Mantra Module
const module = {
  routes(injectDeps) {
    const InjectedComp = injectDeps(MyComp);
    // load routes and put `InjectedComp` to the screen.
  },
  load(context, actions) {
    // do any module initialization
  },
  actions: {
    myNamespace: {
      doSomething: (context, arg1) => {}
    }
  }
};

const context = {
  client: new DataClient()
};

const app = createApp(context);
app.loadModule(module);
// app.loadModule(someOtherModule);
app.init();
```
npm package: @storybook/mdx1-csf-loader
Description: MDXv1 to CSF webpack loader and compiler
Author: Michael Shilman
Latest version: 0.0.1-canary.1.54c01b4.0

## @storybook/csf-mdx1

FIXME: Add description of the project

## Getting Started

FIXME: Add getting started steps

## Contributing

We welcome contributions to Storybook!

- 📥 Pull requests and 🌟 Stars are always welcome.
- Read our [contributing guide](CONTRIBUTING.md) to get started,
  or find us on [Discord](https://discord.gg/storybook), we will take the time to guide you

## License

[MIT](https://github.com/storybookjs/csf-mdx1/blob/main/LICENSE)
npm package: @storybook/mdx2-csf
Description: MDXv2 to CSF webpack compiler and loader
Author: Michael Shilman
Latest version: 1.1.0

## @storybook/mdx2-csf

Storybook's `mdx2-csf` is a compiler that turns MDXv2 input into CSF output.

For example, the following input:

```mdx
import { Meta, Story } from '@storybook/addon-docs';

<Meta title="atoms/Button" />

<Story name="Bar">
  <Button>hello</Button>
</Story>
```

Might be transformed into the following CSF (over-simplified):

```js
export default {
  title: 'atoms/Button',
};

export const Bar = () => <Button>hello</Button>;
```

## API

This library exports an async function to compile MDX, `compile`.
It does not support a synchronous compiler because it uses asynchronous
imports to bridge the ESM/CJS gap. The underlying MDXv2 libraries only
support pure ESM, but this library is used in CJS environments.

### compile

Asynchronously compile a string:

```js
import { compile } from '@storybook/mdx2-csf';

const code = '# hello\n\nworld';
const output = await compile(code);
```

## Loader

In addition, this library supports a simple Webpack loader that mirrors MDXv1's loader, but adds Webpack5 support. It doesn't use MDXv2's loader because it is prohibitively complex, and we want this to be interchangeable with the `@storybook/mdx1-csf`'s loader which is also based on the MDXv1 loader.

The loader takes two options:

- `skipCsf` don't generate CSF stories for the MDX file
- `mdxCompileOptions` full options for the [MDX compile function](https://mdxjs.com/packages/mdx/#api)

For example, to add [GFM support](https://mdxjs.com/guides/gfm/):

```js
import remarkGfm from 'remark-gfm';

module.exports = {
  module: {
    rules: [
      {
        test: /\.(stories|story)\.mdx$/,
        use: [
          {
            loader: require.resolve('@storybook/mdx2-csf/loader'),
            options: {
              skipCsf: false,
              mdxCompileOptions: {
                remarkPlugins: [remarkGfm],
              },
            },
          },
        ],
      },
    ],
  },
};
```

## Contributing

We welcome contributions to Storybook!

- 📥 Pull requests and 🌟 Stars are always welcome.
- Read our [contributing guide](CONTRIBUTING.md) to get started,
  or find us on [Discord](https://discord.gg/storybook), we will take the time to guide you

## License

[MIT](https://github.com/storybookjs/csf-mdx2/blob/main/LICENSE)
npm package: @storybook/melody
Description: Storybook for Melody/Twig: Develop Melody Components in isolation with Hot Reloading.
Latest version: 0.0.3

# Storybook for Melody/Twig

Storybook for Melody/Twig is a UI development environment for your Melody/Twig components.
With it, you can visualize different states of your UI components and develop them interactively.

![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)

Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

## Getting Started

### Step 1: Add dependencies

```sh
cd my-melody-app
npm install @storybook/melody --save-dev
```

### Step 2: Add a npm script

In your `package.json`, add the following npm script to start storybook:

```
{
  "scripts": {
    "storybook": "start-storybook"
  }
}
```

### Step 3: Create the main file

Create the `.storybook/main.js` file to tell Storybook where to find your stories:

```
module.exports {
    stories: ['../src/**/*.stories.[tj]s'],
};
```

You can also add your custom Melody plugins through the `melodyPlugins` key like this:

```
module.exports {
    melodyPlugins: ['load-functions'],
    stories: ['../src/**/*.stories.[tj]s'],
};
```

### Step 4: Write your stories

```
import Button from '../components/button.twig';

export default { title: 'Button', component: Button }

export const withText = () => ({
  props: { text 'some text' }
});

export const withEmoji = () => ({
  props: { text '😀 😎 👍 💯' }
});
```

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

---

Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.

Here are some featured storybooks that you can reference to see how Storybook works:

## Docs

-   [Basics](https://storybook.js.org/basics/introduction)
-   [Configurations](https://storybook.js.org/configurations/default-config)
-   [Addons](https://storybook.js.org/addons/introduction)
npm package: @storybook/native
Description: storybook native build tool
Author: Adil Malik
Latest version: 3.1.2

# @storybook/native
This module is a build tool that allows creation of stories to view components inside of Android and iOS native applications easily inside of storybook. The intended purpose is for native developers to be able to quickly get started with storybook without having to learn how to write extensive amounts of JavaScript, and without having to learn how to use storybook.

## Installation
`npm install @storybook/native`
or
`yarn add @storybook/native`

## Usage
To use this module, you must create a node script [such as this example one](../../examples/android-material-ui/generate.js) that imports `generateStories` from this module. Pass in details about stories that you want this module to generate. Each call to `generateStories` generates a file that contains stories generated from the information you pass in. Run `yarn start-storybook` to view those stories in a local storybook instance, or run `yarn build-storybook` to build a static storybook that can be uploaded as a web page.

### Parameters for `generateStories`
 - category: The group/category that the specified stories will fall under
 - filePath: The path to write the file that contains the generated stories
 - apiKey: Your application's public key that you received from appetize.io
 - platform: What platform your app is running on ("ios" or "android")
 - stories: A list of stories to generate, where each story is an object represented with the following keys:
   - name: The name of the story
   - appParams: Either an object that gets passed to your application when it first launches, or an object representing query string parameters for deep linking. This is what is used to determine which component or page to load in your application, and it can also be used to handle other logic such as theming.
   - docs (optional): Documentation that you want to show up in the storybook docs panel
 - controls: A list of key-value pairs. The key represents the control option, and the value is a data type describing the control configuration, used to generate the story. Currently, supported types include:
   - an array of strings for a `select` option (default to the first value in the array)
   - a simple string for an editable text field (default to `Default` if left empty) 
   - a boolean for a `switch` (default to the set value)
   - or an object with 3 keys: min/max/increment for a `number` (no default value)
 - deepLinkUrl: An optional base URL that is required only if you are using deep linking. Your application must be set to handle incoming URLs for this host (example: sb-native://deep.link)
npm package: @storybook/native-addon
Description: This module contains an addon that can be used to interact with the appetize.io emulator.   Currently, it lets you rotate the emulator left or right, take screenshots, and change the device that is being emulated.
Author: Adil Malik
Latest version: 3.1.2

# @storybook/native-addon
This module contains an addon that can be used to interact with the appetize.io emulator.  
Currently, it lets you rotate the emulator left or right, take screenshots, and change the device that is being emulated.

## Installation
`npm install @storybook/native-addon`
or
`yarn add @storybook/native-addon`

## Usage
Add `"@storybook/native-addon/dist/register.js"` to the addons section of your `main.js` file.

Add the following to your `preview.js` file:
```jsx
import { DeviceDecorator } from "@storybook/native-addon";

export const decorators = [DeviceDecorator];
```

An example main.js can be found [here](../../examples/controls/.storybook/main.js).  
An example preview.js can be found [here](../../examples/controls/.storybook/preview.js).  

## Network Logs 

If you want to use the network logs panel you need to a config the `previewHead` of your storybook , 
it will make sure that the [Appetize SDK](https://docs.appetize.io/javascript-sdk/getting-started) is fetched and setup

Update your `main.js` file with the following code:

```js
import { nativePreviewHead } from "@storybook/native";

const  config = {
    stories: ["../stories/*.stories.jsx"],
    framework: {
        name: "@storybook/react-webpack5",
        options: {},
    },
    addons: [
        "@storybook/addon-docs",
        "@storybook/addon-controls",
        "@storybook/native-addon/dist/register.js"
    ],
    docs: {
        autodocs: true
    },
    previewHead: nativePreviewHead,

};

export default config;
```

## Google Map API Key

If you want to use the map addon panel you need to a global Google map api key, You can get one [here](https://developers.google.com/maps/documentation/javascript)

After you get the api key you can update the `preview.js` file with the following code:

```js
const preview = {
    globalTypes: {
        location: {
            description: 'Device Location',
            defaultValue: getGlobalLocationJson(
                {
                    googleMapsApiKey: "<you-api-key>"
                }
            )
        },
    },
    decorators: [DeviceDecorator]
};

export default preview;
```