• Stars
    star
    126
  • Rank 277,914 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A React Storybook decorator with helpful display options for hosting components under test.

storybook-host

Build Status

A React Storybook decorator with powerful display options for hosting, sizing and framing your components.

Install

npm install -D storybook-host

Try in Storybook

npm start

Usage

import { storiesOf } from '@storybook/react';
import { host } from 'storybook-host';
import { MyComponent } from './MyComponent';

storiesOf('helpers.storybook', module)
  .addDecorator(
    host({
      title: 'A host container for components under test.',
      align: 'center bottom',
      height: '80%',
      width: 400,
    }),
  )
  .add('MyComponent', () => <MyComponent />);

Screen Shot

Properties

host({
  title: <string>,
  hr: <boolean>,
  align: <string>,
  height: <number | string>,
  width: <number | string>,
  background: <boolean | number | string>,
  backdrop: <boolean | number | string>,
  cropMarks: <boolean>,
  border: <boolean | number | string>,
  padding: <number | string>,
});

title: string

The title display that is displayed at the top of the window. Use this to to name and provide a decription of the component under test.

hr: boolean

Flag indicating if the horizontal rule under the title should be shown. Default: true.

align: string [x y]

A string indicating how to align the component within the host. The string takes to parts (x and y) seperated by a space. The order of horizontal vs. vertical does not matter, eg top left is the same as left top.

  • Horizontal (X)
    • left
    • center
    • right
  • Vertical (Y)
    • top
    • middle
    • bottom

width: number | string | undefined

The width to lock the component at, eg: 400 (number as pixels) or 400px or 100%.

height: number | string | undefined

The height to lock the component at, eg: 200 (number as pixels) or 200px or 100%.

maxWidth: number | string | undefined

The maximum width to restrict the component to, eg: 400 (number as pixels) or 400px or 100%.

background: boolean | number | string

The background color to draw behind the component.

  • true: ruby red (eg. rgba(255, 0, 0, 0.1)). Useful for quick visualization of component size.
  • string: A CSS background-color value.
  • number (-1:black..0..1:white)

backdrop: boolean | number | string

The background color of the entire host panel. Same value types as background.

cropMarks: boolean

Flag indicating if the crop-marks should be visible. Default: true.

border: string | number | boolean

Optional border for the component.

padding: number | string

The padding of the host container.

More Repositories

1

ui-harness

Create, isolate and test modular UI components in React.
JavaScript
268
star
2

file-system-cache

A super-fast, promise based cache that reads and writes to the file-system.
TypeScript
43
star
3

react-schema

Use React PropTypes for generic object validation.
JavaScript
21
star
4

react-object

Rich visual representation and editor of javascript objects and values.
JavaScript
20
star
5

ui-harness-sample

Quick-start sample of the UIHarness.
JavaScript
20
star
6

msync

A powerful toolkit for building and syncing multiple node-modules in a flexibly defined workspace.
TypeScript
13
star
7

meteor-package-paths

Manages file paths for Meteor packages.
CoffeeScript
11
star
8

react-middleware

Connect middleware for serving React components from a standard folder structure.
JavaScript
8
star
9

open.core

Common utility functionality used between multiple applications.
CoffeeScript
7
star
10

command-interface

Build powerful command-line interfaces from simple ES6 modules.
TypeScript
6
star
11

Open.TestHarness.SL

The open-source visual TestHarness for building magnificent UI.
C#
5
star
12

sample-mike-ui-module

Module with TypeScript, React, Storybook
TypeScript
2
star
13

js-open.core_dev

Development project for [js-open.core]
JavaScript
2
star
14

meteor-private-package

CLI tool for linking and copying private Meteor smart packages using Meteorite.
CoffeeScript
2
star
15

react-atoms

Low level react components (the 'atoms' of larger UI structures).
JavaScript
2
star
16

app-sync

Runs one or more node-apps keeping them in sync with Github.
JavaScript
2
star
17

sample-docker-microservices

Sample Docker file showing how a root image can be used for a set of Node based microservices.
Shell
2
star
18

js-util

Shared JS utilities.
JavaScript
1
star
19

js-bdd

A "Behavior Driven Development" DSL.
JavaScript
1
star
20

testharness

Visual test harness for cleanly crafting rich client-side JavaScript applications.
CoffeeScript
1
star
21

node-pm2

A light-weight node OS with PM2 installed.
1
star
22

new-file

Simple file templates.
TypeScript
1
star
23

generator-npm

A simple starting point for an NPM module.
JavaScript
1
star
24

meteor-package-loader

Provides sprockets style loading of files for a Meteor package.
CoffeeScript
1
star
25

log.server

A simple and colorful logger abstraction.
TypeScript
1
star
26

philcockfield

Profile: Phil Cockfield
1
star
27

transpilers

Modules that consolidate Babel configurations.
JavaScript
1
star