added storybook to ui-components

scm-ui/ui-components/.storybook/addons.js

@@ -0,0 +1 @@
+import 'storybook-addon-i18next/register';

scm-ui/ui-components/.storybook/config.js

@@ -0,0 +1,28 @@
+import i18n from "i18next";
+import { reactI18nextModule } from "react-i18next";
+import { addDecorator, configure } from "@storybook/react";
+import { withI18next } from "storybook-addon-i18next";
+
+import "!style-loader!css-loader!sass-loader!../../ui-webapp/src/style/scm.scss";
+
+i18n.use(reactI18nextModule).init({
+  whitelist: ["en", "de", "es"],
+  lng: "en",
+  fallbackLng: "en",
+  interpolation: {
+    escapeValue: false
+  }
+});
+
+addDecorator(
+  withI18next({
+    i18n,
+    languages: {
+      en: "English",
+      de: "Deutsch",
+      es: "Spanisch"
+    }
+  })
+);
+
+configure(require.context("../src", true, /\.stories\.js$/), module);

scm-ui/ui-components/package.json

@@ -12,16 +12,22 @@
   "license": "BSD-3-Clause",
   "scripts": {
     "eslint-fix": "eslint src --fix",
-    "test": "jest"
+    "test": "jest",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.2.3",
+    "@storybook/addon-storyshots": "^5.2.3",
+    "@storybook/react": "^5.2.3",
     "enzyme": "^3.5.0",
     "enzyme-adapter-react-16": "^1.3.1",
     "fetch-mock": "^7.5.1",
     "flow-bin": "^0.109.0",
     "flow-typed": "^2.5.1",
     "raf": "^3.4.0",
-    "react-router-enzyme-context": "^1.2.0"
+    "react-router-enzyme-context": "^1.2.0",
+    "storybook-addon-i18next": "^1.2.1",
+    "storybook-react-router": "^1.0.8"
   },
   "dependencies": {
     "@scm-manager/ui-extensions": "^0.1.2",
@@ -32,7 +38,7 @@
     "react": "^16.8.6",
     "react-diff-view": "^1.8.1",
     "react-dom": "^16.8.6",
-    "react-i18next": "^7.11.0",
+    "react-i18next": "^7.9.0",
     "react-jss": "^8.6.1",
     "react-markdown": "^4.0.6",
     "react-router-dom": "^4.3.1",
@@ -45,6 +51,9 @@
   "jest": {
     "transform": {
       "^.+\\.js$": "../scripts/babelMonoRepoTransformer.js"
+    },
+    "moduleNameMapper": {
+      "\\.(css|scss|sass)$": "<rootDir>/src/tests/styleMock.js"
     }
   }
 }

scm-ui/ui-components/src/DateFromNow.stories.js

@@ -0,0 +1,14 @@
+import React from "react";
+import DateFromNow from "./DateFromNow";
+import { storiesOf } from "@storybook/react";
+
+storiesOf("DateFromNow", module).add("Default", () => (
+  <div>
+    <p>
+      <DateFromNow date="2009-06-30T18:30:00+02:00" />
+    </p>
+    <p>
+      <DateFromNow date="2019-06-30T18:30:00+02:00" />
+    </p>
+  </div>
+));

scm-ui/ui-components/src/buttons/Button.stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Button from "./Button";
+import { storiesOf } from "@storybook/react";
+import StoryRouter from "storybook-react-router";
+import styled from "styled-components";
+
+const colors = ["primary", "success", "info", "warning", "danger", "black"];
+
+const Spacing = styled.div`
+  padding: 1em;
+`;
+
+storiesOf("Button", module)
+  .addDecorator(StoryRouter())
+  .add("Colors", () => (
+    <div>
+      {colors.map(color => (
+        <Spacing>
+          <Button color={color} label={color} />
+        </Spacing>
+      ))}
+    </div>
+  ));

scm-ui/ui-components/src/tests/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};