Add storybook and one default story

Author: jakobkolb

frontend/.storybook/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@emotion"]
+}

frontend/.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.(ts|tsx|js|jsx)'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+  ],
+};

frontend/package.json

@@ -16,7 +16,9 @@
     "heroku-postbuild": "yarn run build",
     "lint": "eslint --ext .ts --ext .tsx src/",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "serve": "ts-node mock-api/server"
+    "serve": "ts-node mock-api/server",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "homepage": "/app/static",
   "dependencies": {
@@ -37,6 +39,7 @@
     "lodash.difference": "^4.5.0",
     "mustache": "^2.3.0",
     "node-sass": "^4.12.0",
+    "ramda": "^0.27.0",
     "react": "^16.13.1",
     "react-animated-dots": "^1.0.0",
     "react-dnd": "^9.4.0",
@@ -68,6 +71,11 @@
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/preset-create-react-app": "^3.1.4",
+    "@storybook/react": "^5.3.19",
     "@types/axios": "^0.14.0",
     "@types/body-parser": "^1.19.0",
     "@types/classnames": "^2.2.10",
@@ -82,6 +90,7 @@
     "@types/node-sass": "^4.11.1",
     "@types/papaparse": "^5.0.4",
     "@types/prettier": "^2.0.2",
+    "@types/ramda": "^0.27.11",
     "@types/react": "^16.9.25",
     "@types/react-dnd-multi-backend": "^4.0.1",
     "@types/react-dom": "^16.9.5",

frontend/src/index.ts

@@ -20,12 +20,8 @@ const disableLogin = !!process.env.REACT_APP_DISABLE_LOGIN;
 const LANG = process.env.REACT_APP_LANG;
 
 if (!LANG || LANG === "de") {
-  //@ts-ignore
-
   initializeLocalization("de", de, translationsDe);
 } else {
-  //@ts-ignore
-
   initializeLocalization("en", enGB, translationsEn);
 }
 
@@ -45,5 +41,5 @@ const environment = {
 };
 
 const tabs = [StandardQueryEditorTab, TimebasedQueryEditorTab, FormsTab];
-
+console.log(tabs);
 conquery(environment, tabs, theme);

frontend/src/js/app/Content.tsx

@@ -65,7 +65,7 @@ type PropsType = {
   rightTabs: TabT[];
 };
 
-const CustomHTML5toTouch = {
+export const CustomHTML5toTouch = {
   backends: [
     {
       backend: HTML5Backend

frontend/src/js/index.tsx

@@ -33,8 +33,8 @@ const renderRoot = (tabs: Record<string, any>, theme: Theme) => {
       basename: basename()
     });
   //@ts-ignore
-
   store = store || makeStore(initialState, browserHistory, tabs);
+  console.log(store.getState());
 
   ReactDOM.render(
     <ThemeProvider theme={theme}>

frontend/src/js/localization/index.ts

@@ -1,4 +1,5 @@
 import _T from "i18n-react";
+import { Locale } from "date-fns";
 
 import { mergeDeep } from "../common/helpers";
 
@@ -7,11 +8,11 @@ export const T = _T;
 type AvailableLocale = "en" | "de";
 
 let i18nLocale: AvailableLocale | null = null;
-let dateFnsLocale: AvailableLocale | null = null;
+let dateFnsLocale: Locale | null = null;
 
 export const initializeLocalization = (
   locale: AvailableLocale,
-  dateLocale: AvailableLocale,
+  dateLocale: Locale,
   // @ts-ignore
   ...texts
 ) => {

frontend/src/js/standard-query-editor/QueryEditor.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { QueryEditor } from "./QueryEditor";
+import { StoryWrapper } from "../../storybook";
+
+export default {
+  component: QueryEditor,
+  title: "Query Editor"
+};
+
+const dropAction = {
+  type: "query-editor/DROP_AND_NODE",
+  payload: {
+    item: {
+      width: 572.2000122070312,
+      height: 20,
+      ids: ["action_movies"],
+      label: "Action Movies",
+
+      tree: "movie_appearances"
+    }
+  }
+};
+
+export const Default = () => (
+  <StoryWrapper actions={[dropAction]}>
+    <QueryEditor selectedDatasetId={"blub"} />
+  </StoryWrapper>
+);

frontend/src/storybook/index.tsx

@@ -0,0 +1,43 @@
+import { createBrowserHistory } from "history";
+import React from "react";
+import { makeStore } from "../js/store";
+import { Provider } from "react-redux";
+import { ThemeProvider } from "@emotion/react";
+import { theme } from "../app-theme";
+import { DndProvider } from "react-dnd";
+import MultiBackend from "react-dnd-multi-backend";
+import { CustomHTML5toTouch } from "../js/app/Content";
+import StandardQueryEditorTab from "../js/standard-query-editor";
+import TimebasedQueryEditorTab from "../js/timebased-query-editor";
+import FormsTab from "../js/external-forms";
+import { initializeLocalization } from "../js/localization";
+import translationsDe from "../localization/de.json";
+import { de } from "date-fns/locale";
+import { AnyAction } from "redux";
+import * as R from "ramda";
+
+initializeLocalization("de", de, translationsDe);
+
+const browserHistory = createBrowserHistory();
+const tabs = [StandardQueryEditorTab, TimebasedQueryEditorTab, FormsTab];
+
+type StoryWrapperProps = {
+  actions?: ReadonlyArray<AnyAction>;
+};
+
+export const StoryWrapper: React.FC<StoryWrapperProps> = ({
+  children,
+  actions = []
+}) => {
+  const store = makeStore({}, browserHistory, tabs);
+  R.forEach(store.dispatch, actions);
+  return (
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <DndProvider backend={MultiBackend} options={CustomHTML5toTouch}>
+          {children}
+        </DndProvider>
+      </ThemeProvider>
+    </Provider>
+  );
+};