Add more stories

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": {
@@ -68,6 +70,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",
@@ -116,6 +123,7 @@
     "react-scripts": "^3.4.1",
     "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.5.1",
+    "storybook-addon-emotion-theme": "^2.1.1",
     "timekeeper": "^2.0.0",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.8.1",

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/api/types.ts

@@ -20,7 +20,7 @@ export type SelectOptionsT = SelectOptionT[];
 
 // Example: { min: "2019-01-01", max: "2019-12-31" }
 // @ts-ignore
-export type DateRangeT = ?{ min?: string; max?: string };
+export type DateRangeT = { min: string; max: string };
 
 export interface CurrencyConfigT {
   prefix: string;

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/concept-trees/ConceptTreeSearchBox.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "@emotion/styled";
+import styled from "@emotion/styled/macro";
 import T from "i18n-react";
 import { connect } from "react-redux";
 

frontend/src/js/external-forms/form-configs/FormConfig.tsx

@@ -186,7 +186,7 @@ const FormConfig: React.FC<PropsT> = ({
   };
 
   //@ts-ignore
-  const [collectedProps, drag] = useDrag({
+  const [, drag] = useDrag({
     item: dragItem,
     isDragging: monitor => monitor.isDragging()
   });

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/Query.tsx

@@ -46,7 +46,7 @@ type PropsT = {
   selectNodeForEditing: Function;
   queryGroupModalSetNode: Function;
   toggleTimestamps: Function;
-  dateRange: Record<string, any>;
+  dateRange: DateRangeT;
 };
 
 const Container = styled("div")`

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { QueryEditor } from "./QueryEditor";
+import { ProviderForAllTheShitYouMayNeed } from "../../test/storybook-helpers/StorybookComponentProvider";
+
+export default {
+  component: QueryEditor,
+  title: "Query Editor"
+};
+
+export const Default = () => (
+  <ProviderForAllTheShitYouMayNeed actions={[]}>
+    <QueryEditor selectedDatasetId={"blub"} />
+  </ProviderForAllTheShitYouMayNeed>
+);
+
+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 WithNode = () => (
+  <ProviderForAllTheShitYouMayNeed actions={[dropAction]}>
+    <QueryEditor selectedDatasetId={"blub"} />
+  </ProviderForAllTheShitYouMayNeed>
+);

frontend/src/test/storybook-helpers/StorybookComponentProvider.tsx

@@ -0,0 +1,43 @@
+import { createBrowserHistory } from "history";
+import React from "react";
+import { makeStore } from "../../js/store";
+import { Provider } from "react-redux";
+import { AnyAction } from "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";
+
+initializeLocalization("de", de, translationsDe);
+
+const browserHistory = createBrowserHistory();
+const tabs = [StandardQueryEditorTab, TimebasedQueryEditorTab, FormsTab];
+
+type Props = {
+  actions: AnyAction[];
+  children: any;
+};
+
+export const ProviderForAllTheShitYouMayNeed: React.FC<Props> = ({
+  children,
+  actions
+}) => {
+  const store = makeStore({}, browserHistory, tabs);
+  actions.map(store.dispatch);
+  return (
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <DndProvider backend={MultiBackend} options={CustomHTML5toTouch}>
+          {children}
+        </DndProvider>
+      </ThemeProvider>
+    </Provider>
+  );
+};