Set up storybook with one simple styled component

Author: Morley Zhi

.storybook/addons.js

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

.storybook/config.js

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

.storybook/webpack.config.js

@@ -0,0 +1,5 @@
+module.exports = async ({ config }) => {
+  config.resolve.modules = [...(config.resolve.modules || []), "./src"];
+
+  return config;
+};

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "js-stellar-elements",
+  "version": "0.0.0",
+  "description": "Styled elements for use on Stellar projects",
+  "main": "index.js",
+  "repository": "git@github.com:stellar/js-stellar-elements.git",
+  "author": "Morley Zhi <morley@stellar.org>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "styled-components": "^4.2.0"
+  },
+  "devDependencies": {
+    "@storybook/react": "^5.0.10",
+    "@storybook/addon-actions": "^5.0.10",
+    "@storybook/addon-links": "^5.0.10",
+    "@storybook/addons": "^5.0.10",
+    "@babel/core": "^7.4.3",
+    "babel-loader": "^8.0.5"
+  },
+  "scripts": {
+    "storybook": "NODE_PATH=src && start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  }
+}

src/Button.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+const Button = styled.button`
+  background: blue;
+  color: white;
+`;
+
+export default Button;

stories/index.stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { linkTo } from "@storybook/addon-links";
+
+import Button from "Button";
+
+storiesOf("Button", module)
+  .add("with text", () => (
+    <Button onClick={action("clicked")}>Hello Button</Button>
+  ))
+  .add("with some emoji", () => (
+    <Button onClick={action("clicked")}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));