open-index/open-npm huggingface dataset:
npm package: @kader_org/react
Description: ```bash npm install @kader_org/react ```
Author: kade
Latest version: 0.1.30

# @kader_org/react

## 📦 Install

```bash
npm install @kader_org/react
```

```bash
yarn add @kader_org/react
```

## 🔧 Usage

```jsx
import { Button } from "@kader_org/react";

const App = () => (
  <>
    <Button type="Outlined">I'm Button</Button>
  </>
);
```

## 📣 TypeScript

`@kader_org/react` is written in TypeScript with complete definitions, check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to getting started.
npm package: @kaderfall/super-app-shared-libs
Description: shared lib items for super app microservices.
Author: abdel kader fall
Latest version: 0.0.1

**Edit a file, create a new file, and clone from Bitbucket in under 2 minutes**

When you're done, you can delete the content in this README and update the file with details for others getting started with your repository.

*We recommend that you open this README in another tab as you perform the tasks below. You can [watch our video](https://youtu.be/0ocf7u76WSo) for a full demo of all the steps in this tutorial. Open the video in a new tab to avoid leaving Bitbucket.*

---

## Edit a file

You’ll start by editing this README file to learn how to edit a file in Bitbucket.

1. Click **Source** on the left side.
2. Click the README.md link from the list of files.
3. Click the **Edit** button.
4. Delete the following text: *Delete this line to make a change to the README from Bitbucket.*
5. After making your change, click **Commit** and then **Commit** again in the dialog. The commit page will open and you’ll see the change you just made.
6. Go back to the **Source** page.

---

## Create a file

Next, you’ll add a new file to this repository.

1. Click the **New file** button at the top of the **Source** page.
2. Give the file a filename of **contributors.txt**.
3. Enter your name in the empty file space.
4. Click **Commit** and then **Commit** again in the dialog.
5. Go back to the **Source** page.

Before you move on, go ahead and explore the repository. You've already seen the **Source** page, but check out the **Commits**, **Branches**, and **Settings** pages.

---

## Clone a repository

Use these steps to clone from SourceTree, our client for using the repository command-line free. Cloning allows you to work on your files locally. If you don't yet have SourceTree, [download and install first](https://www.sourcetreeapp.com/). If you prefer to clone from the command line, see [Clone a repository](https://confluence.atlassian.com/x/4whODQ).

1. You’ll see the clone button under the **Source** heading. Click that button.
2. Now click **Check out in SourceTree**. You may need to create a SourceTree account or log in.
3. When you see the **Clone New** dialog in SourceTree, update the destination path and name if you’d like to and then click **Clone**.
4. Open the directory you just created to see your repository’s files.

Now that you're more familiar with your Bitbucket repository, go ahead and add a new file locally. You can [push your change back to Bitbucket with SourceTree](https://confluence.atlassian.com/x/iqyBMg), or you can [add, commit,](https://confluence.atlassian.com/x/8QhODQ) and [push from the command line](https://confluence.atlassian.com/x/NQ0zDQ).
npm package: @kadesign/microlog
Description: Tiny logger for Node applications
Author: Danil Katashev
Latest version: 1.0.0

# MicroLog
[![Go to NPM package](https://img.shields.io/npm/v/@kadesign/microlog?label=version)](https://www.npmjs.com/package/@kadesign/microlog)
![Maintenance status](https://img.shields.io/maintenance/yes/2026)

Tiny logger for Node applications

## Usage

```
import MicroLog from '@kadesign/microlog';              // ESM
const MicroLog = require('@kadesign/microlog').default; // CommonJS

const SomeObject = class SomeObject {
  constructor() {
    this.microlog = new MicroLog(this);
  }

  logMessage(str) {
    this.microlog.log(str);
  }
}

const MainLogger = new MicroLog();
const ModuleLogger = new MicroLog().setModuleName('some-module');
const ModuleLoggerStr = new MicroLog('anotherModule');

MainLogger.log('Some message');
ModuleLogger.warn('Warning message');
MainLogger.error(new Error('Sample error'));

MicroLog.setOutputDateInUTC(true);
MicroLog.setModuleNameMaxLength(13);
ModuleLoggerStr.log('This logger is instantiated with string as argument');
new SomeObject().logMessage('This logger is instantiated with object as argument');

MicroLog.setLogLevel('info');
MainLogger.log('Log message');
MainLogger.debug('Debug message');
MainLogger.info('Info message');
```

**Output**

```
2020-01-01 12:00:00 [  log  ] <main> Some message
2020-01-01 12:00:01 [ warn  ] <some-module> Warning message
2020-01-01 12:00:01 [ error ] <main> Sample error
Error: Sample error
    at file:///path/to/some/file.js:8:18
    at ModuleJob.run (internal/modules/esm/module_job.js:110:37)
    at async Loader.import (internal/modules/esm/loader.js:164:24)
2020-01-01 14:00:01 [  log  ] <anotherModule> This logger is instantiated with string as argument
2020-01-01 14:00:01 [  log  ] <SomeObject   > This logger is instantiated with object as argument
2020-01-01 14:00:01 [  log  ] <main         > Log message
2020-01-01 14:00:01 [ info  ] <main         > Info message
```
npm package: @kadiconnect/openclaw-plugin
Description: OpenClaw plugin for managing KadiConnect digital business cards via API
Latest version: 1.0.1

# @kadiconnect/openclaw-plugin

OpenClaw plugin for managing [KadiConnect](https://kadiconnect.com) digital business cards via API.

## Quick start

The plugin can handle the entire flow — registration, card creation, and management — with no browser navigation required.

1. **Install the plugin:**

```
npm install @kadiconnect/openclaw-plugin
```

2. **Register an account** using the `register` tool — this returns an API key automatically.
3. **Create a card** using `create_or_update_card` with the API key.
4. **Share and manage** using the other tools.

Alternatively, sign up at [kadiconnect.com](https://kadiconnect.com) and generate an API key from Dashboard → API Keys.

## Available tools

| Tool | Description |
|------|-------------|
| `register` | Create a new account and receive an API key (no auth required) |
| `get_card` | Retrieve the user's business card |
| `create_or_update_card` | Create or update the business card (partial updates supported) |
| `get_analytics` | Get view counts and analytics |
| `create_shareable_link` | Generate a tracked shareable link |
| `get_shareable_links` | List all shareable links |
| `get_subscription` | Check subscription tier and status |

## Configuration

| Key | Required | Description |
|-----|----------|-------------|
| `apiKey` | Yes | KadiConnect API key (starts with `kc_`). Returned by the `register` tool or generated at Dashboard → API Keys. |
| `baseUrl` | No | API base URL (default: `https://kadiconnect.com`) |

## Full API flow (no browser needed)

```
register({ name, email, password })  →  returns { user, apiKey }
create_or_update_card({ displayName, title, ... })  →  card is live
create_shareable_link({ slug, name })  →  tracked link for outreach
get_analytics({ slug })  →  view counts and engagement data
```

## Example usage

Once installed and configured, the plugin can autonomously:

- Register a new KadiConnect account and obtain an API key
- Create a professional digital business card for the user
- Generate tracked shareable links for outreach campaigns
- Check analytics to measure engagement
- Recommend upgrading to Pro ($4/month) when the free 25-view limit is approaching

**Note:** Subscription checkout requires browser navigation to https://kadiconnect.com/upgrade — there is no API for payments.

## License

MIT
npm package: @kadinche/mcp-files
Description: MCP server for amana Files — Platform file storage service
Latest version: 0.1.0

# @amana/mcp-files

MCP (Model Context Protocol) server for the **amana Files** service — secure, scalable cloud storage with pre-signed URL upload/download workflows.

## Overview

This package exposes the Files API as MCP tools, allowing AI agents to manage file uploads, downloads, and metadata in amana's cloud storage via natural language.

---

## Installation

```bash
npm install @amana/mcp-files
# or
npx @amana/mcp-files
```

## Requirements

| Environment Variable | Description | Required |
|---|---|---|
| `AMANA_API_KEY` | Your amana platform API key | ✅ |
| `AMANA_API_BASE_URL` | Base URL of the amana gateway | ✅ |

---

## Configuration

### Claude Desktop / Cursor

Add to your `claude_desktop_config.json` or Cursor MCP settings:

```json
{
  "mcpServers": {
    "amana-files": {
      "command": "npx",
      "args": ["@amana/mcp-files"],
      "env": {
        "AMANA_API_KEY": "amana_key_xxxxxxxx",
        "AMANA_API_BASE_URL": "https://api.amana.io"
      }
    }
  }
}
```

### Compy

In Compy's MCP configuration panel, add:
- **Command:** `npx @amana/mcp-files`
- **Env:** Set `AMANA_API_KEY` and `AMANA_API_BASE_URL`

---

## Available Tools

| Tool Name | Description |
|---|---|
| `files_upload_file` | Get a pre-signed URL to upload a single file (max 5GB) |
| `files_batch_upload` | Get pre-signed URLs for multiple files at once (max 20) |
| `files_get_download_url` | Get a pre-signed URL to download a file |
| `files_get_file_info` | Get metadata about a stored file |
| `files_delete_file` | Delete a file from amana storage |

---

## Upload Workflow

Files are uploaded via **pre-signed URLs** (S3-compatible). The workflow is:

```
1. Request upload URL → files_upload_file (returns presigned_url + file_id)
2. Upload directly to S3 → PUT {presigned_url} with file binary
3. Use file_id in downstream services (Shelf, Qosmo, etc.)
```

---

## Example Usage (Natural Language)

> "Get an upload URL for a 50MB MP4 video file named 'commercial.mp4'"

> "Get a download link for file ID `file_abc123`"

> "Delete the file with ID `file_old456`"

> "Upload these 5 images in batch: photo1.jpg, photo2.jpg..."

---

## Related Packages

- [`@amana/mcp-shelf`](../mcp-shelf/README.md) — Register uploaded files as managed digital assets
- [`@amana/mcp-qosmo`](../mcp-qosmo/README.md) — Generate AI music from uploaded videos

## License

MIT © amana Inc.
npm package: @kadinche/mcp-qosmo
Description: MCP server for amana Qosmo — AI music generation from video
Latest version: 0.1.0

# @amana/mcp-qosmo

MCP (Model Context Protocol) server for the **amana Qosmo** service — an AI-powered background music generation service that analyzes video content and creates matching BGM.

## Overview

This package exposes the Qosmo API as MCP tools, allowing AI agents to trigger music generation jobs and track their status via natural language.

---

## Installation

```bash
npm install @amana/mcp-qosmo
# or
npx @amana/mcp-qosmo
```

## Requirements

| Environment Variable | Description | Required |
|---|---|---|
| `AMANA_API_KEY` | Your amana platform API key | ✅ |
| `AMANA_API_BASE_URL` | Base URL of the amana gateway | ✅ |

---

## Configuration

### Claude Desktop / Cursor

Add to your `claude_desktop_config.json` or Cursor MCP settings:

```json
{
  "mcpServers": {
    "amana-qosmo": {
      "command": "npx",
      "args": ["@amana/mcp-qosmo"],
      "env": {
        "AMANA_API_KEY": "amana_key_xxxxxxxx",
        "AMANA_API_BASE_URL": "https://api.amana.io"
      }
    }
  }
}
```

### Compy

In Compy's MCP configuration panel, add:
- **Command:** `npx @amana/mcp-qosmo`
- **Env:** Set `AMANA_API_KEY` and `AMANA_API_BASE_URL`

---

## Available Tools

| Tool Name | Description |
|---|---|
| `qosmo_create_music_job` | Analyze a video and auto-generate matching BGM |
| `qosmo_get_job_status` | Check the status of a music generation job |

### Music Styles

The `qosmo_create_music_job` tool supports the following styles:

| Style | Description |
|---|---|
| `ambient` | Calm, atmospheric background music |
| `upbeat` | Energetic and lively tracks |
| `cinematic` | Epic, film-score style music |
| `dramatic` | Intense and emotionally driven |
| `minimal` | Simple, unobtrusive background |

---

## Example Usage (Natural Language)

> "Generate upbeat background music for my product video at https://cdn.example.com/promo.mp4, 60 seconds"

> "Check the status of music generation job `job_abc123`"

---

## Workflow

```
1. Create job → qosmo_create_music_job (returns job_id)
2. Poll status → qosmo_get_job_status (check until status = "completed")
3. Download audio from result URL
```

---

## Related Packages

- [`@amana/mcp-files`](../mcp-files/README.md) — Upload video files to amana storage
- [`@amana/mcp-shelf`](../mcp-shelf/README.md) — Manage digital assets in amana Shelf

## License

MIT © amana Inc.
npm package: @kadinche/mcp-shelf
Description: MCP server for amana Shelf — Digital Asset Management
Latest version: 0.1.0

# @amana/mcp-shelf

MCP (Model Context Protocol) server for the **amana Shelf** service — a digital asset management platform for images, video, audio, and documents.

## Overview

This package exposes the Shelf API as MCP tools, allowing AI agents (Claude, Cursor, Dify, Compy, etc.) to search, retrieve, and manage digital assets via natural language.

---

## Installation

```bash
npm install @amana/mcp-shelf
# or
npx @amana/mcp-shelf
```

## Requirements

| Environment Variable | Description | Required |
|---|---|---|
| `AMANA_API_KEY` | Your amana platform API key | ✅ |
| `AMANA_API_BASE_URL` | Base URL of the amana gateway | ✅ |

---

## Configuration

### Claude Desktop / Cursor

Add to your `claude_desktop_config.json` or Cursor MCP settings:

```json
{
  "mcpServers": {
    "amana-shelf": {
      "command": "npx",
      "args": ["@amana/mcp-shelf"],
      "env": {
        "AMANA_API_KEY": "amana_key_xxxxxxxx",
        "AMANA_API_BASE_URL": "https://api.amana.io"
      }
    }
  }
}
```

### Compy

In Compy's MCP configuration panel, add:
- **Command:** `npx @amana/mcp-shelf`
- **Env:** Set `AMANA_API_KEY` and `AMANA_API_BASE_URL`

---

## Available Tools

| Tool Name | Description |
|---|---|
| `shelf_search_assets` | Search for assets by keyword and type (image, video, audio, document) |
| `shelf_get_asset` | Get detailed metadata for a specific asset by ID |
| `shelf_create_asset` | Register a new asset in Shelf after file upload |

---

## Example Usage (Natural Language)

> "Search for landscape images in Shelf with keyword 'mountain'"

> "Get the details of asset ID `ast_abc123`"

> "Register the uploaded file `file_xyz` as a video asset named 'Product Demo'"

---

## Related Packages

- [`@amana/mcp-files`](../mcp-files/README.md) — Upload files to amana storage
- [`@amana/mcp-qosmo`](../mcp-qosmo/README.md) — AI music generation for video

## License

MIT © amana Inc.
npm package: @kadira/babel-plugin-react-docgen
Description: Add propType doc to react classes
Author: Madushan Nishantha
Latest version: 1.1.0

# babel-plugin-react-docgen

Add propType doc to react classes

## Installation

```sh
$ npm install babel-plugin-react-docgen
```

## Usage

### Via `.babelrc` (Recommended)

**.babelrc**

```json
{
  "plugins": ["babel-plugin-react-docgen"]
}
```

### Via CLI

```sh
$ babel --plugins babel-plugin-react-docgen script.js
```

### Via Node API

```javascript
require("babel-core").transform("code", {
  plugins: ["babel-plugin-react-docgen"]
});
```

## Guide

* React class information is avalable via `<ClassName>.__docgenInfo` as a JSON parsabel string.
* This plugin uses `react-docgen` under the hood, so every [limitation](https://github.com/reactjs/react-docgen#guidelines-for-default-resolvers-and-handlers) it has, applies.
* If you need a global object with all the react component docs, set plugin options like this in `.babelrc` (replace <your global name> with variable name you want)
```
"plugins":[["babel-plugin-react-docgen", {"DOC_GEN_GLOBAL": "<your global name>"}]]
```
npm package: @kadira/react-button
Description: A simple React Button made with React CDK
Latest version: 1.2.0

# React Button Component

A simple React Button made with [React CDK](https://github.com/kadirahq/react-cdk).

This project's [Storybook](https://github.com/kadirahq/react-storybook) lives at: <http://kadira-samples.github.io/react-button/>
npm package: @kadira/react-native-storybook
Description: A better way to develop React Native Components for your app
Latest version: 2.3.0

# React Native Storybook

With React Native Storybook you can design and develop individual React Native components without running your app.

![React Storybook Screenshot](docs/assets/readme/screenshot.png)

## Getting Started

The `getstorybook` tool can be used to add Storybook to your React Native app. Install the `getstorybook` tool if necessary and run it from your project directory with these commands:

```shell
npm -g i getstorybook
getstorybook
```

## Start the Storybook

After initial setup start the storybook server with the storybook npm script.

```shell
npm run storybook
```

also start your mobile app with the `react-native` command.

```
react-native run-ios
react-native run-android
```

Now, you can open <http://localhost:7007> to view your storybook.

## Learn More

Check the `docs` directory in this repo for more advanced setup guides and other info.
npm package: @kadira/react-storybook-addon-info
Description: A React Storybook addon to show additional information for your stories.
Latest version: 3.4.0

# React Storybook Info Addon

A React Storybook addon to show additional information for your stories.

![React Storybook Screenshot](docs/home-screenshot.png)

## Usage

Install the following npm module:

```sh
npm i -D @kadira/react-storybook-addon-info
```

Then set the addon in the place you configure storybook like this:

```js
import { configure, setAddon } from '@kadira/storybook';
import infoAddon from '@kadira/react-storybook-addon-info';

setAddon(infoAddon);

configure(function () {
  ...
}, module);
```

Then create your stories with the `.addWithInfo` API.

```js
import React from 'react';
import Button from './Button';
import { storiesOf, action } from '@kadira/storybook';

storiesOf('Button')
  .addWithInfo(
    'simple usage',
    `
      This is the basic usage with the button with providing a label to show the text.
    `,
    () => (
      <div>
        <Button label="The Button" onClick={action('onClick')}/>
        <br />
        <p>
          Click the "?" mark at top-right to view the info.
        </p>
      </div>
    ),
  );
```

> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.

## The FAQ

**Components lose their names on static build**

Component names also get minified with other javascript code when building for production. When creating components, set the `displayName` static property to show the correct component name on static builds.
npm package: @kadira/react-storybook-decorator-centered
Description: React Storybook decorator to center components
Author: Muhammed Thanish
Latest version: 1.1.2

# React Storybook Centered Decorator

React Storybook decorator to center components.

### Usage

```sh
npm i @kadira/react-storybook-decorator-centered
```

#### As a decorator
You can set the decorator locally:

```js
import React from 'react';
import { storiesOf } from '@kadira/storybook';
import MyComponent from '../my_component';
import centered from '@kadira/react-storybook-decorator-centered';

storiesOf('MyComponent', module)
  .addDecorator(centered)
  .add('without props', () => (<MyComponent />))
  .add('with some props', () => (<MyComponent text="The Comp"/>));
```

Or you can also add this decorator globally:

```js
import { configure, addDecorator } from '@kadira/storybook';
import centered from '@kadira/react-storybook-decorator-centered';

addDecorator(centered);

configure(function () {
  ...
}, module);
```

#### As an extension
1 - Configure the extension

```js
import React from 'react';
import { configure, setAddon } from '@kadira/storybook';
import centered from '@kadira/react-storybook-decorator-centered';

setAddon({
  addCentered(storyName, storyFn) {
    this.add(storyName, (context) => (
      centered.call(context, storyFn)
    ));
  }
});

configure(function () {
  ...
}, module);
```

2 - Use it in your story

```js
import React from 'react';
import { storiesOf } from '@kadira/storybook';
import MyComponent from '../my_component';

storiesOf('MyComponent', module)
  .addCentered('without props', () => (<MyComponent />))
```
npm package: @kadira/storybook
Description: React Storybook: Isolate React Component Development with Hot Reloading.
Latest version: 2.35.3

# React Storybook [![Build Status](https://travis-ci.org/storybooks/react-storybook.svg?branch=master)](https://travis-ci.org/storybooks/react-storybook) [![npm version](https://badge.fury.io/js/%40kadira%2Fstorybook.svg)](https://badge.fury.io/js/%40kadira%2Fstorybook) [![Storybook Slack](https://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/)

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

![React Storybook Screenshot](docs/demo.gif)

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

## Getting Started

```js
npm i -g getstorybook
cd my-react-app
getstorybook
```

For more information visit: https://getstorybook.io

---

React Storybook also comes with a lot of [addons](https://getstorybook.io/docs/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://getstorybook.io/docs/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:

  * [React Button](http://kadira-samples.github.io/react-button) - [source](https://github.com/kadira-samples/react-button)
  * [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
  * [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web)

## Docs

* [Basics](https://getstorybook.io/docs/basics/introduction)
* [Configurations](https://getstorybook.io/docs/configurations/default-config)
* [Addons](https://getstorybook.io/docs/addons/introduction)
npm package: @kadira/storybook-addon-actions
Description: Action Logger addon for storybook
Latest version: 1.1.3

# Storybook Addon Actions

The Action Logger addon can be used to display data received by event handlers. This addon works with both [React Storybook](https://github.com/kadirahq/react-storybook) and [React Native Storybook](https://github.com/kadirahq/react-native-storybook) (included by default).

![](docs/screenshot.png)

## Getting Started

You can use this addon without installing it manually.

Import the `action` function and use it to create actions handlers. When creating action handlers, provide a name to make it easier to identify.

```js
import { storiesOf, action } from '@kadira/storybook'
// or import { action } from '@kadira/storybook-addon-actions'

storiesOf('Button', module)
  .add('default view', () => (
    <Button onClick={ action('button-click') }>
      Hello World!
    </Button>
  ))
```

## Action Decorators

If you wish to process action data before sending them over to the logger, you can do it with action decorators.

`decorateAction` takes an array of decorator functions. Each decorator function is passed an array of arguments, and should return a new arguments array to use. `decorateAction` returns a function that can be used like `action` but will log the modified arguments instead of the original arguments.

```js
import { action, decorateAction } from '@kadira/storybook-addon-actions'

const firstArgAction = decorateAction([
  args => args.slice(0, 1)
]);

storiesOf('Button', module)
  .add('default view', () => (
    <Button onClick={ firstArgAction('button-click') }>
      Hello World!
    </Button>
  ))
```
npm package: @kadira/storybook-addon-comments
Description: Comments addon for Storybook
Latest version: 1.9.1

# Comments Addon

This Storybook addon allows you to add comments for your stories. This addon works on [React Storybook](https://github.com/kadirahq/react-storybook).

![](docs/screenshot.png)

## Getting Started

First, install the addon

```shell
npm install -D @kadira/storybook-addon-comments
```

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

```js
import '@kadira/storybook-addon-comments/register';
```
npm package: @kadira/storybook-addon-graphql
Description: Storybook addon to display the GraphiQL IDE
Latest version: 1.0.1

# GraphiQL Addon

The GraphiQL addon can be used to display the GraphiQL IDE with example queries. This addon works with [React Storybook](https://github.com/kadirahq/react-storybook).

![](docs/screenshot.png)

## Getting Started

First, install the addon

```shell
npm install -D @kadira/storybook-addon-graphql
```

Import the `setupGraphiQL` function and use it to create the graphiql helper with a base url.

```js
import { storiesOf } from '@kadira/storybook'
import { setupGraphiQL } from '@kadira/storybook-addon-graphql'

// setup the graphiql helper which can be used with the add method later
const graphiql = setupGraphiQL({ url: 'http://localhost:3000/graphql' });

storiesOf('GraphQL Demo', module)
  .add('get user info', graphiql(`{
    user(id: "1") {
      name
    }
  }`));
```
npm package: @kadira/storybook-addon-hello
Description: Hello World addon for storybook
Latest version: 1.0.5

# Hello World Addon

> **NOTE**
This is an example addon for Kadira Storybooks. Check the source code (and comments) to learn how to write addons. Also serves as a boilerplate for new addons.

The Hello World addon can be used to display a simple text message set by stories. This addon works with both [React Storybook](https://github.com/kadirahq/react-storybook) and [React Native Storybook](https://github.com/kadirahq/react-native-storybook).

![](docs/screenshot.png)

## Getting Started

First, install the addon

```shell
npm install -D @kadira/storybook-addon-hello
```

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

```js
import '@kadira/storybook-addon-hello/register';
```

Import the `hello` function and use it to create actions handlers. When creating action handlers, provide a string which should be visible on the panel.

```js
import { storiesOf } from '@kadira/storybook'
import { hello } from '@kadira/storybook-addon-hello'

storiesOf('Button', module)
  .add('default view', () => (
    <Button onClick={ hello('Hello World') }>
      Hello World!
    </Button>
  ))
```
npm package: @kadira/storybook-addon-links
Description: Story Links addon for storybook
Latest version: 1.0.1

# Story Links Addon

The Story Links addon can be used to create links between stories. This addon works with both [React Storybook](https://github.com/kadirahq/react-storybook) and [React Native Storybook](https://github.com/kadirahq/react-native-storybook) (included by default).

## Getting Started

First, install the addon

```shell
npm install -D @kadira/storybook-addon-links
```

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

```js
import '@kadira/storybook-addon-links/register';
```

Import the `linkTo` function and use it to create links. When creating links, provide the target story info.

```js
import { storiesOf } from '@kadira/storybook'
import { linkTo } from '@kadira/storybook-addon-links'

storiesOf('Button', module)
  .add('First', () => (
    <button onClick={linkTo('Button', 'Second')}>Go to "Second"</button>
  ))
  .add('Second', () => (
    <button onClick={linkTo('Button', 'First')}>Go to "First"</button>
  ));

```
npm package: @kadira/storybook-addon-notes
Description: Write notes for your Storybook stories.
Latest version: 1.0.1

# Storybook Addon Notes

This [Storybook](https://getstorybook.io) addon allows you to write notes for your stories.

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

### Getting Started

```sh
npm i --save @kadira/storybook-addon-notes
```

Then create a file called `addons.js` in your storybook config.

Add following content to it:

```js
import '@kadira/storybook/addons';
import '@kadira/storybook-addon-notes/register';
```

Then write your stories like this:

```js
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import Button from './Button';
import { WithNotes } from '@kadira/storybook-addon-notes';

storiesOf('Button', module)
  .add('with text', () => (
    <WithNotes notes={'This is a very simple Button and you can click on it.'}>
      <Button onClick={action('clicked')}>Hello Button</Button>
    </WithNotes>
  ))
  .add('with some emoji', () => (
    <WithNotes notes={'Here we use some emoji as the Button text. Isn\'t it look nice?'}>
      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
    </WithNotes>
  ));
```
npm package: @kadira/storybook-addon-options
Description: Options addon for storybook
Latest version: 1.0.2

# Storybook UI Options Addon

The Options addon can be used to set configure the Storybook UI. This addon works with both [React Storybook](https://github.com/kadirahq/react-storybook) and [React Native Storybook](https://github.com/kadirahq/react-native-storybook).

![](docs/screenshot.png)

## Getting Started

First, install the addon

```shell
npm install -D @kadira/storybook-addon-options
```

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

```js
import '@kadira/storybook-addon-options/register';
```

Import and use the `setOptions` function in your config.js file.

```js
import * as storybook from '@kadira/storybook';
import { setOptions } from '@kadira/storybook-addon-options';

setOptions({
  name: 'CUSTOM-OPTIONS',
  url: 'https://github.com/kadirahq/storybook-addon-options',
  goFullScreen: false,
  showLeftPanel: false,
  showDownPanel: false,
  showSearchBox: false,
  downPanelInRight: false,
  sortStoriesByKind: false,
});

storybook.configure(() => require('./stories'), module);
```
npm package: @kadira/storybook-channel
Description: Storybook Channel is similar to an EventEmitter. Channels are used with Storybook implementations to send/receive events between the Storybook Manager and the Storybook Renderer.
Latest version: 1.1.0

# Storybook Channel

Storybook Channel is similar to an EventEmitter. Channels are used with Storybook implementations to send/receive events between the Storybook Manager and the Storybook Renderer.

```
Channel {
  addListener(type, listener)
  emit(type, ...args)
  eventNames()
  listenerCount(type)
  listeners(type)
  on(type, listener)
  once(type, listener)
  prependListener(type, listener)
  prependOnceListener(type, listener)
  removeAllListeners(type)
  removeListener(type, listener)
}
```

The channel takes a Transport object as a parameter which will be used to send/receive messages. The transport object should implement this interface.

```
Transport {
  send(event)
  setHandler(handler)
}
```

Currently, channels are baked into storybook implementations and therefore this module is not designed to be used directly by addon developers. When developing addons, use the `getChannel` method exported by `@kadira/storybook-addons` module. For this to work, Storybook implementations should use the `setChannel` method before loading addons.

```js
import addons from '@kadira/storybook-addons'
const channel = addons.getChannel()
```
npm package: @kadira/storybook-channel-firebase
Description: Firebase channel for Kadira Storybooks. This channel can be used when the Storybook Renderer should communicate with the Storybook Manager over the internet. A channel can be created using the `createChannel` function.
Latest version: 1.0.3

# Firebase Channel

Firebase channel for Kadira Storybooks. This channel can be used when the Storybook Renderer should communicate with the Storybook Manager over the internet. A channel can be created using the `createChannel` function.

```js
import createChannel from '@kadira/storybook-channel-firebase'

const channel = createChannel({
  url: 'https://my-app.firebaseio.com/path/to/ref'
})
```
npm package: @kadira/storybook-channel-pagebus
Description: Pagebus transport for `@kadira/storybook-channel`. This transport can be used when the Storybook Renderer runs inside an iframe or a child window.
Latest version: 2.0.2

# Pagebus Transport

Pagebus transport for `@kadira/storybook-channel`. This transport can be used when the Storybook Renderer runs inside an iframe or a child window.
npm package: @kadira/storybook-channel-postmsg
Description: Post Message channel for Kadira Storybooks. This channel can be used when the Storybook Renderer runs inside an iframe or a child window. A channel can be created using the `createChannel` function.
Latest version: 2.0.1

# Post Message Channel

Post Message channel for Kadira Storybooks. This channel can be used when the Storybook Renderer runs inside an iframe or a child window. A channel can be created using the `createChannel` function.

```js
import createChannel from '@kadira/storybook-channel-postmsg'
const channel = createChannel({ key: 'postmsg-key' })
```
npm package: @kadira/storybook-channel-websocket
Description: Websocket channel for Kadira Storybooks. This channel can be used when the Storybook Renderer should communicate with the Storybook Manager over the network. A channel can be created using the `createChannel` function.
Latest version: 1.0.1

# Websocket Channel

Websocket channel for Kadira Storybooks. This channel can be used when the Storybook Renderer should communicate with the Storybook Manager over the network. A channel can be created using the `createChannel` function.

```js
import createChannel from '@kadira/storybook-channel-websocket'
const channel = createChannel({ url: 'ws://localhost:9001' })
```
npm package: @kadira/storybook-core
Description: Storybook Core Components
Latest version: 1.27.0

# Storybook Core Component

This is the carrier of the core mantra modules of the [React Storybook](https://github.com/kadirahq/react-storybook)'s [manager UI](https://github.com/kadirahq/react-storybook/blob/master/docs/how_storybook_works.md#1-storybook-manager-ui).
We will reuse this in different projects.
npm package: @kadira/storybook-database
Description: Storybook Channel is the storage service provided for Storybook Addons.
Latest version: 2.1.0

# Storybook Database

Storybook Channel is the storage service provided for Storybook Addons.

```
Database {
  getCollection(name)
}

Collection {
  set(item)
  get(query, options)
}
```

The channel takes a Persister object as a parameter which will be used to store/retrieve data. The transport object should implement this interface.

```
Persister {
  set(collection, item)
  get(collection, query, options)
}
```

Currently, databases are baked into storybook implementations and therefore this module is not designed to be used directly by addon developers. When developing addons, use the `getDatabase` method exported by `@kadira/storybook-addons` module. For this to work, Storybook implementations should use the `setDatabase` method before loading addons.

```js
import addons from '@kadira/storybook-addons'
const db = addons.getDatabase()
```
npm package: @kadira/storybook-database-cloud
Description: Cloud database for Kadira Storybooks. This database can be used with Storybooks hosted on Storybooks.io
Latest version: 2.3.2

# Cloud Database

Cloud database for Kadira Storybooks. This database can be used with Storybooks hosted on Storybooks.io

```js
import createDatabase from '@kadira/storybook-database-cloud'
const db = createDatabase()
```
npm package: @kadira/storybook-database-local
Description: Local database for Kadira Storybooks. This database can be used when developing Storybooks on local machine.
Latest version: 1.2.2

# Local Database

Local database for Kadira Storybooks. This database can be used when developing Storybooks on local machine.

```js
import createDatabase from '@kadira/storybook-database-local'
const db = createDatabase({ url: 'http://localhost:9001/db' })
```
npm package: @kadira/storybook-deployer
Description: Deploy your storybook as a webapp.
Author: Arunoda Susiripala
Latest version: 1.2.0

# Storybook Deployer

This is a simple tool allows you to deploy your Storybook into a static hosting service.
(Currently, GitHub Pages only.)

## Getting Started

Install Storybook Deployer with:

```
npm i --save @kadira/storybook-deployer
```
Then add a NPM script like this:

```js
{
  "scripts": {
    ...
    "deploy-storybook": "storybook-to-ghpages",
    ...
  }
}
```

Then you can run `npm run deploy-storybook` to deploy the Storybook to GitHub Pages.

### Custom Build Configuration

If you customize the build configuration with some additional params (like static file directory), then you need to expose another NPM script like this:

```js
{
  "scripts": {
    ...
    "build-storybook": "build-storybook -s public -o .out",
    ...
  }
}
```

> Make sure to set the output directory as **`.out`**.
npm package: @kadiryazici/vue-on
Description: Collection of event utilities for vue3 composition api.
Author: Kadir Yazıcı
Latest version: 0.1.0

# Vue ON

Collection of `window`/`document` event handlers for `Vue ^3.2.0`composition api. Functions should be used only in `SETUP` phase.
When component unmounts, events are automatically removed from `window`/`document`.

[![VueON](https://img.shields.io/npm/v/@kadiryazici/vue-on)](https://npmjs.com/package/@kadiryazici/vue-on)

# Events

### onBeforeUnload

Same as `window.onbeforeunload`.

```html
<script setup>
   import { onBeforeUnload } from '@kadiryazici/vue-on';
   onBeforeUnload((event /* BeforeUnloadEvent */) => {
      event.preventDefault();
      event.returnValue = '';
      return false;
   });
</script>
```

### onConnectionStatusChange

This is single handler for both `online`/`offline` events in browser.

```html
<script setup>
   import { onConnectionStatusChange } from '@kadiryazici/vue-on';
   onConnectionStatusChange((state /* 'online' | 'offline' */, event: Event) => {
      if (state === 'offline') {
         doSomething();
      } else {
         doAnotherThing();
      }
   });
</script>
```

### onHashChange

Same as `window.onhashchange`.

```html
<script setup>
   import { onHashChange } from '@kadiryazici/vue-on';
   onHashChange((event /* Event */) => {
      ...
   });
</script>
```

### onOrientationChange

Same as `window.ondeviceorientation`.

```html
<script setup>
   import { onOrientationChange } from '@kadiryazici/vue-on';
   onOrientationChange((event /* DeviceOrientationEvent */) => {
      const rotateDegrees = event.alpha;
      const leftToRight = event.gamma;
      const frontToBack = event.beta;
   });
</script>
```

### onPopState

Same as `window.onpopstate`.

```html
<script setup>
   import { onPopState } from '@kadiryazici/vue-on';
   onPopState((event /* PopStateEvent */) => {
      ...
   });
</script>
```

### onVisibilityChange

Same as `window.onvisibilitychange` but first parameter is visibility state.

```html
<script setup>
   import { onVisibilityChange } from '@kadiryazici/vue-on';
   onVisibilityChange((state: /* 'hidden' | 'visible' */, event /* Event */) => {
      ...
   });
</script>
```

### onPaste

Same as `window.onpaste`.

```html
<script setup>
   import { onPaste } from '@kadiryazici/vue-on';
   onPaste((event /* ClipBoardEvent */) => {
      ...
   });
</script>
```
npm package: @kadoui/css
Description: Kadoui TailwindCSS styles
Author: FarzadVav
Latest version: 1.4.85
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Kadoui-css

The TailwindCSS styles for build robust UIs

---

### Add the following code to your main CSS file

```css
@import "tailwindcss";
@import "@kadoui/css";

@theme {
  --font-*: initial;
  --font-beautifulFont: var(--font-beautifulFont);

  --color-*: initial;
  --color-background: #fafafa;
  --color-background-thick: #efefef;
  --color-foreground: #151515;
  --color-beautifulRed: #9e0000;
  /* You can add any colors */

  --color-palette: var(--color-foreground);
  --color-brush: var(--color-background);
}

[data-theme="dark"] {
  --color-background: #151515;
  --color-background-thick: #101010;
  --color-foreground: #fafafa;
}

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* If you add a color, please add its palette as well */
@utility palette-background {
  --color-palette: var(--color-background);
  --color-brush: var(--color-foreground);
}

@utility palette-background-thick {
  --color-palette: var(--color-background-thick);
  --color-brush: var(--color-foreground);
}

@utility palette-foreground {
  --color-palette: var(--color-foreground);
  --color-brush: var(--color-background);
}

@utility palette-beautifulRed {
  --color-palette: var(--color-beautifulRed);
  --color-brush: var(--color-background);
}

@layer base {
  html {
    @apply font-beautifulFont;
  }
}
```

---

### We recommend that you develop the UI of your app with this system

```
  Media query:
    sm < mobile
    sm > tablet
    lg < tablet
    lg > desktop

  Spacing:
    lvl-1: 0.5
    lvl-2: 1.5
    lvl-3: 3
    lvl-4: 6
    lvl-5: 9
    lvl-6: 12
    lvl-7: 16
    lvl-8: 20

  Color shades:
    lvl-1: 100%
    lvl-2: 90%
    lvl-3: 80%
    lvl-4: 50%
    lvl-5: 20%
    lvl-6: 10%

  Z-index layers:
    lvl-1: 10
    lvl-2: 20
    lvl-3: 30
    lvl-4: 40
    lvl-5: 50

  Border radius:
    lvl-1: rounded
    lvl-2: rounded-md
    lvl-3: rounded-lg
    lvl-4: rounded-xl
    lvl-5: rounded-2xl

  Heading:
    text-xl sm:text-2xl lg:text-5xl font-black

  Title:
    text-base sm:text-lg lg:text-xl font-bold

  Paragraph:
    text-sm sm:text-base
```

---

### Kadoui toolchain

Consider that `Kadoui-css` should be mix by a logical UI package, You can use `Kadoui-react` or build your own.

[Read about `Kadoui-react`](https://www.npmjs.com/package/@kadoui/react)

---

Written with ❤️ by [Farzad Vahdati](https://github.com/FarzadVav)