Storybook for hyperapp components

.teamcity/OpenSourceProjects_Storybook/buildTypes/StotybookApp.kt

@@ -14,7 +14,7 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged:
     MITHRIL("Mithril", "mithril-kitchen-sink"),
     HTML("HTML", "html-kitchen-sink"),
     MARKO("Marko", "marko-cli"),
-    HYPERAPP("Hyperapp", "hyperapp-kitchen-sink", false);
+    HYPERAPP("Hyperapp", "hyperapp-kitchen-sink");
 
     val lowerName = appName.toLowerCase()
 

app/hyperapp/.npmignore

@@ -0,0 +1,3 @@
+docs
+src
+.babelrc

app/hyperapp/README.md

@@ -0,0 +1,24 @@
+# Storybook for Hyperapp <sup>alpha</sup>
+
+* * *
+
+Storybook for Hyperapp is a UI development environment for your Hyperapp components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+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
+npm i -g @storybook/cli
+cd my-app
+getstorybook --hyperapp
+```
+
+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.

app/hyperapp/bin/build.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server/build');

app/hyperapp/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');

app/hyperapp/options.js

@@ -0,0 +1 @@
+module.exports = require('./dist/server/options');

app/hyperapp/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@storybook/hyperapp",
+  "version": "4.0.0-alpha.9",
+  "description": "Storybook for Hyperapp: Develop Hyperapp Component in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/hyperapp",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/core": "4.0.0-alpha.9",
+    "common-tags": "^1.8.0",
+    "global": "^4.3.2",
+    "hyperapp": "^1.2.6",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-runtime": "^6.26.0"
+  },
+  "peerDependencies": {
+    "hyperapp": "^1.2.6"
+  }
+}

app/hyperapp/src/client/index.js

@@ -0,0 +1,9 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+} from './preview';

app/hyperapp/src/client/preview/globals.js

@@ -0,0 +1,3 @@
+import { window } from 'global';
+
+window.STORYBOOK_ENV = 'Hyperapp';

app/hyperapp/src/client/preview/index.js

@@ -0,0 +1,18 @@
+import { start } from '@storybook/core/client';
+
+import './globals';
+import render from './render';
+
+const { clientApi, configApi, forceReRender } = start(render);
+
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
+
+export const { configure } = configApi;
+export { forceReRender };

app/hyperapp/src/client/preview/render.js

@@ -0,0 +1,27 @@
+import { document } from 'global';
+import { stripIndents } from 'common-tags';
+import * as hyperapp from 'hyperapp';
+
+const rootElement = document.getElementById('root');
+
+function render(target, component) {
+  hyperapp.app({}, {}, component, target);
+}
+
+export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
+  const component = story();
+
+  if (!component) {
+    showError({
+      title: `Expecting a Hyperapp component from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Did you forget to return the Hyperapp component from the story?
+        Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
+      `,
+    });
+    return;
+  }
+
+  showMain();
+  render(rootElement, component);
+}

app/hyperapp/src/server/build.js

@@ -0,0 +1,5 @@
+import { buildStatic } from '@storybook/core/server';
+
+import options from './options';
+
+buildStatic(options);

app/hyperapp/src/server/index.js

@@ -0,0 +1,5 @@
+import { buildDev } from '@storybook/core/server';
+
+import options from './options';
+
+buildDev(options);

app/hyperapp/src/server/options.js

@@ -0,0 +1,8 @@
+import packageJson from '../../package.json';
+
+import wrapInitialConfig from './wrapInitialConfig';
+
+export default {
+  packageJson,
+  wrapInitialConfig,
+};

app/hyperapp/src/server/wrapInitialConfig.js

@@ -0,0 +1 @@
+export default config => config;

examples/hyperapp-kitchen-sink/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["env"],
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "pragma": "h"
+      }
+    ]
+  ]
+}

examples/hyperapp-kitchen-sink/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  rules: {
+    'no-unused-vars': [2, { varsIgnorePattern: 'h' }],
+    'react/jsx-uses-vars': 2,
+    'react/react-in-jsx-scope': 0,
+  },
+};

examples/hyperapp-kitchen-sink/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

examples/hyperapp-kitchen-sink/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/hyperapp';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../src', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

examples/hyperapp-kitchen-sink/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Hyperapp Demo App</title>
+</head>
+<body>
+<div id="root"></div>
+<script src="./src/index.js"></script>
+</body>
+</html>

examples/hyperapp-kitchen-sink/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "hyperapp-example",
+  "version": "4.0.0-alpha.9",
+  "private": true,
+  "scripts": {
+    "build": "parcel build index.html --public-url ./",
+    "start": "parcel index.html",
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook -p 9009"
+  },
+  "dependencies": {
+    "hyperapp": "^1.2.6",
+    "picostyle": "^2.0.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "4.0.0-alpha.9",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.9",
+    "@storybook/addon-centered": "4.0.0-alpha.9",
+    "@storybook/addon-knobs": "4.0.0-alpha.9",
+    "@storybook/addon-links": "4.0.0-alpha.9",
+    "@storybook/addon-notes": "4.0.0-alpha.9",
+    "@storybook/addon-options": "4.0.0-alpha.9",
+    "@storybook/addon-storyshots": "4.0.0-alpha.9",
+    "@storybook/addon-storysource": "4.0.0-alpha.9",
+    "@storybook/addon-viewport": "4.0.0-alpha.9",
+    "@storybook/addons": "4.0.0-alpha.9",
+    "@storybook/hyperapp": "4.0.0-alpha.9",
+    "babel-core": "^6.26.3",
+    "babel-preset-env": "^1.7.0",
+    "parcel": "^1.9.0"
+  }
+}

examples/hyperapp-kitchen-sink/src/components/App.js

@@ -0,0 +1,15 @@
+import { h } from 'hyperapp';
+import Button from './Button';
+
+const App = (state, actions) => (
+  <main>
+    <h1>Welcome to Hyperapp Demo App!</h1>
+    <div>
+      <h1>{state.count}</h1>
+      <Button onclick={() => actions.down(1)}>-</Button>
+      <Button onclick={() => actions.up(1)}>+</Button>
+    </div>
+  </main>
+);
+
+export default App;

examples/hyperapp-kitchen-sink/src/components/Button.js

@@ -0,0 +1,9 @@
+import { h } from 'hyperapp';
+
+const Button = (attributes, children) => (
+  <button {...attributes} type={attributes.type || 'button'}>
+    {children}
+  </button>
+);
+
+export default Button;

examples/hyperapp-kitchen-sink/src/components/Welcome.js

@@ -0,0 +1,83 @@
+import { h } from 'hyperapp';
+import picostyle from 'picostyle';
+
+const style = picostyle(h);
+
+const Main = style('div')({
+  margin: '15px',
+  maxWidth: '600px',
+  lineHeight: 1.4,
+  fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+});
+
+const Code = style('code')({
+  fontSize: '15px',
+  fontWeight: '600',
+  padding: '2px 5px',
+  border: '1px solid #eae9e9',
+  borderRadius: '4px',
+  backgroundColor: '#f3f2f2',
+  color: '#3a3a3a',
+});
+
+const Logo = style(() => (
+  <svg
+    width="100"
+    viewBox="0 0 691 585"
+    style={{
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+      strokeLinejoin: 'round',
+      strokeMiterlimit: 1.41421,
+    }}
+  >
+    <g transform="matrix(1,0,0,1,-154.583,-207.856)">
+      <g transform="matrix(2.45578,0,0,2.45578,154.583,207.856)">
+        <path
+          d="M245.853,47.585L93.936,47.585L111.257,0L60.618,0L0,166.547L50.637,166.547L76.618,95.17L228.531,95.17L219.871,118.962L93.41,118.962L67.363,190.339L67.363,190.34C65.948,194.226 65.224,198.331 65.224,202.467C65.224,221.918 81.23,237.924 100.681,237.924L176.57,237.924L193.89,190.339L118.001,190.339L126.728,166.547L202.551,166.547L193.891,190.339L244.53,190.339L279.171,95.17L279.171,95.169C280.586,91.283 281.31,87.178 281.31,83.042C281.31,63.591 265.304,47.585 245.853,47.585Z"
+          style={{ fillRule: 'nonzero' }}
+        />
+      </g>
+    </g>
+  </svg>
+))({
+  margin: '15px',
+});
+
+const Welcome = () => (
+  <Main>
+    <h1>Welcome to Storybook for Hyperapp</h1>
+    <p>This is a UI component dev environment for your Hyperapp components.</p>
+    <p>
+      We've added some basic stories inside the <Code>stories</Code> directory. A story is a single
+      state of one or more UI components. You can have as many stories as you want. (Basically a
+      story is like a visual test case.)
+    </p>
+    <p>
+      See these sample{' '}
+      <a href="/" data-sb-kind="Demo" data-sb-story="button">
+        stories
+      </a>.
+    </p>
+    <p>
+      <Logo />
+    </p>
+    <p>
+      Just like that, you can add your own snippets as stories. You can also edit those snippets and
+      see changes right away.
+    </p>
+    <p>
+      Usually we create stories with smaller UI components in the app. Have a look at the{' '}
+      <a
+        href="https://storybook.js.org/basics/writing-stories"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Writing Stories
+      </a>{' '}
+      section in our documentation.
+    </p>
+  </Main>
+);
+
+export default Welcome;

examples/hyperapp-kitchen-sink/src/index.js

@@ -0,0 +1,14 @@
+/* global document */
+import { h, app } from 'hyperapp';
+import App from './components/App';
+
+const state = {
+  count: 0,
+};
+
+const actions = {
+  down: value => prevState => ({ count: prevState.count - value }),
+  up: value => prevState => ({ count: prevState.count + value }),
+};
+
+app(state, actions, App, document.querySelector('#root'));