# storybook-aem-confluence

> Integrate Confluence and JIRA with your Storybook stories

Latest version **1.0.0** (published 2020-02-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install storybook-aem-confluence
pnpm add storybook-aem-confluence
yarn add storybook-aem-confluence
bun add storybook-aem-confluence
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-02-11 |
| First published | 2020-02-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 302.2 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Josh Zeltman |
| Maintainers | jzeltman |
| Keywords | confluence, jira, storybook, aem |

## Links

- npm: https://www.npmjs.com/package/storybook-aem-confluence
- Repository: https://github.com/icfnext/storybook-aem
- Homepage: https://github.com/icfnext/storybook-aem/tree/master/packages/storybook-aem-confluence#readme
- Issues: https://github.com/icfnext/storybook-aem/issues
- npm.io page: https://npm.io/package/storybook-aem-confluence

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^16.12.0
- [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.7.4
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^3.0.0
- [@storybook/addons](https://npm.io/package/@storybook/addons.md) ^5.2.6
- [@storybook/components](https://npm.io/package/@storybook/components.md) ^5.2.6
- [http-proxy-middleware](https://npm.io/package/http-proxy-middleware.md) ^0.20.0
- [@storybook/core-events](https://npm.io/package/@storybook/core-events.md) ^5.2.6

## Recent versions

- 1.0.0 (latest) — 2020-02-11

## README

# Storybook-AEM-Confluence
> Integrate Confluence and JIRA with your Storybook stories

Storybook-AEM-Confluence is an addon that enables you to pull content from the Confluence API into storybook. For example, you can add the content from your wiki page about your component in an addon panel. Additionally, Storybook-AEM-Confluence supports multiple content ID's so you can have more than one page from Confluence per component.

## Install Storybook-AEM-Confluence:

```npm i storybook-aem-confluence```

## Usage
Open or create your storybook addons file and add:
```
// .storybook/addons.js
import 'storybook-aem-confluence/register';
```

Next open or create the storybook middleware file and add:
```
// .storybook/middleware.js
const proxy = require('http-proxy-middleware'); 
const ConfluenceMiddleware = require('storybook-aem-confluence/middleware');

module.exports = router => {
    // any other code

    router.use(
        '/confluence/:id',
        ConfluenceMiddleware({
            baseUrl: 'https://[confluenceDomain].atlassian.net/wiki',
            username: process.env.confluenceUser,
            password: process.env.confluencePassword
        })
    );
}
```

> It is suggested to use [dotenv](https://www.npmjs.com/package/dotenv) or some other mechanism to get your username and password, and not have them stored in code.

Next, in your storybook config, add this:
```
// .storybook/config.js
import { withConfluence } from 'storybook-aem-confluence';

addDecorator(withConfluence);
```

And finally, in your stories you can use the confluence panel like so:

```
// path/to/your/story.js
// You may also add the confluence parameter on individual stories as well
// This id is the content id from confluence, often found in the URL of the page
export default {
    parameters: {
        confluence: {
            tabs: [
                {
                    title: 'Tab 1',
                    id: '123456789' 
                },
                {
                    title: 'Tab 2',
                    id: '987654321'
                }
                
            ]
        }
    }
};
```

---
_Source: https://npm.io/package/storybook-aem-confluence · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._