# @jmassberg/storybook-utils-stencil

> Utilities and Components that extend the storybook features for stencil projects

Latest version **0.1.1** (published 2021-10-20) · 0 weekly downloads

## Install

```sh
npm install @jmassberg/storybook-utils-stencil
pnpm add @jmassberg/storybook-utils-stencil
yarn add @jmassberg/storybook-utils-stencil
bun add @jmassberg/storybook-utils-stencil
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-10-20 |
| First published | 2021-10-20 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 55.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jmassberg |

## Links

- npm: https://www.npmjs.com/package/@jmassberg/storybook-utils-stencil
- Repository: https://github.com/janmassberg/storybook-utils-stencil
- Homepage: https://github.com/janmassberg/storybook-utils-stencil#readme
- Issues: https://github.com/janmassberg/storybook-utils-stencil/issues
- npm.io page: https://npm.io/package/@jmassberg/storybook-utils-stencil

## Recent versions

- 0.1.1 (latest) — 2021-10-20
- 0.1.0 — 2021-10-20
- 0.0.1 — 2021-10-20

## README

# @jmassberg/storybook-utils-stencil

Utilities and Components that extend the storybook features for stencil projects

## Requirements

This library is meant to be used in storybook projects.
The provided utilities and components depend on modules that are usually installed with storybook.

## Installation

```shell
npm i @jmassberg/storybook-utils-stencil
```

## Utilities

#### Usage example: generateSourceCode

```jsx
import {
    generateSourceCodeHtml,
    generateSourceCodeVanillaJs,
    generateSourceCodeReact,
} from "@jmassberg/storybook-utils-stencil";

const args = {
    testFalse: false,
    testTrue: true,
    testString: "test-string",
    testNumber: 12345,
    testArray: [1, 2, 3],
    testObject: {
        foo: "bar",
    },
    onTestEvent: testArgEventHandler,
    _children: "Test children",
};

const htmlCode = generateSourceCodeHtml("my-component", args);
const jsCode = generateSourceCodeVanillaJs("my-component", args);
const reactCode = generateSourceCodeReact("my-component", args);
```

## Components

#### Usage example: SourceCode

In your MDX story:

```jsx
import { SourceCode } from "@jmassberg/storybook-utils-stencil";

<SourceCode
    theme="dark"
    codeBlocks={{
        html: [
            {
                language: "html",
                code: "<my-component id='test-id'></my-component>"
            }
        ],
        javascript: [
            {
                language: "javascript",
                code: "const element = document.querySelector('my-component#test-id');"
            }
        ]
    }}
/>
```

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