@truedat/qx 5.12.2 → 5.12.7

package/src/components/functions/expressions/constantInputs/__tests__/__snapshots__/AnySelector.spec.js.snap

@@ -0,0 +1,236 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AnySelector /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui basic button dropdown"
+    name="type"
+    role="listbox"
+    tabindex="0"
+  >
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      class="menu transition"
+    >
+      <div
+        aria-checked="false"
+        aria-selected="true"
+        class="selected item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="adjust icon"
+        />
+        <span
+          class="text"
+        >
+          boolean
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="font icon"
+        />
+        <span
+          class="text"
+        >
+          string
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="hashtag icon"
+        />
+        <span
+          class="text"
+        >
+          numeric
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="calendar alternate outline icon"
+        />
+        <span
+          class="text"
+        >
+          date
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="clock outline icon"
+        />
+        <span
+          class="text"
+        >
+          timestamp
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<AnySelector /> user interaction 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui basic button dropdown"
+    name="type"
+    role="listbox"
+    style=""
+    tabindex="0"
+  >
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider text"
+      role="alert"
+    >
+      string
+    </div>
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      class="menu transition"
+    >
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="adjust icon"
+        />
+        <span
+          class="text"
+        >
+          boolean
+        </span>
+      </div>
+      <div
+        aria-checked="true"
+        aria-selected="true"
+        class="active selected item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="font icon"
+        />
+        <span
+          class="text"
+        >
+          string
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="hashtag icon"
+        />
+        <span
+          class="text"
+        >
+          numeric
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="calendar alternate outline icon"
+        />
+        <span
+          class="text"
+        >
+          date
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="clock outline icon"
+        />
+        <span
+          class="text"
+        >
+          timestamp
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="required field"
+  >
+    <div
+      class="ui input"
+    >
+      <input
+        autocomplete="off"
+        required=""
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/functions/expressions/constantInputs/__tests__/__snapshots__/BooleanSelector.spec.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BooleanSelector /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui fluid selection dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      class="menu transition"
+    >
+      <div
+        aria-checked="false"
+        aria-selected="true"
+        class="selected item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <span
+          class="text"
+        >
+          true
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <span
+          class="text"
+        >
+          false
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<BooleanSelector /> user interaction 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui fluid selection dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider text"
+      role="alert"
+    >
+      true
+    </div>
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      class="menu transition"
+    >
+      <div
+        aria-checked="true"
+        aria-selected="true"
+        class="active selected item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <span
+          class="text"
+        >
+          true
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <span
+          class="text"
+        >
+          false
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/functions/expressions/constantInputs/__tests__/__snapshots__/DefaultSelector.spec.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DefaultSelector /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="required field"
+  >
+    <div
+      class="ui input"
+    >
+      <input
+        autocomplete="off"
+        required=""
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DefaultSelector /> user interaction 1`] = `
+<div>
+  <div
+    class="required field"
+  >
+    <div
+      class="ui input"
+    >
+      <input
+        autocomplete="off"
+        required=""
+        type="text"
+        value="text"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/functions/expressions/constantInputs/index.js

@@ -0,0 +1,5 @@
+import AnySelector from "./AnySelector";
+import BooleanSelector from "./BooleanSelector";
+import DefaultSelector from "./DefaultSelector";
+
+export { AnySelector, BooleanSelector, DefaultSelector };

package/src/components/functions/useWatchParams.js

@@ -0,0 +1,13 @@
+import { useFormContext } from "react-hook-form";
+
+export default function useWatchParams() {
+  const { watch } = useFormContext();
+  const params = watch("params");
+
+  params.map((_, idx) => {
+    watch(`params[${idx}].name`);
+    watch(`params[${idx}].type`);
+  });
+
+  return params;
+}

package/src/hooks/__tests__/useFunctions.spec.js

@@ -0,0 +1,101 @@
+import _ from "lodash/fp";
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import { renderHook } from "@testing-library/react-hooks";
+import {
+  apiJson,
+  apiJsonPost,
+  apiJsonPatch,
+  apiJsonDelete,
+} from "@truedat/core/services/api";
+import { API_FUNCTIONS, API_FUNCTION } from "../../api";
+import {
+  useFunctions,
+  useFunctionCreate,
+  useFunctionUpdate,
+  useFunctionDelete,
+} from "../useFunctions";
+
+jest.mock("swr", () => ({
+  __esModule: true,
+  ...jest.requireActual("swr"),
+  default: jest.fn(() => ({
+    data: { data: "data" },
+    error: null,
+    mutate: jest.fn(),
+  })),
+}));
+
+jest.mock("swr/mutation", () => ({
+  __esModule: true,
+  ...jest.requireActual("swr/mutation"),
+  default: jest.fn(),
+}));
+
+jest.mock("@truedat/core/services/api", () => ({
+  __esModule: true,
+  ...jest.requireActual("@truedat/core/services/api"),
+  apiJsonPost: jest.fn(),
+  apiJsonPatch: jest.fn(),
+  apiJsonDelete: jest.fn(),
+}));
+
+describe("useFunctions", () => {
+  it("useFunctions calls useSWR with correct api route", () => {
+    const { result } = renderHook(() => useFunctions());
+
+    expect(result.current).toMatchObject({
+      data: "data",
+      error: null,
+      loading: false,
+    });
+
+    expect(useSWR).toHaveBeenCalledWith(API_FUNCTIONS, apiJson);
+  });
+  it("useFunctionCreate calls useSWRMutations with correct api route", () => {
+    renderHook(() => useFunctionCreate());
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+    const arg = { some: "arg" };
+    expect(url).toBe(API_FUNCTIONS);
+    func(url, { arg });
+
+    expect(apiJsonPost).toHaveBeenCalledWith(url, arg);
+  });
+  it("useFunctionUpdate calls useSWRMutations with correct api route", () => {
+    const id = 8;
+    renderHook(() => useFunctionUpdate({ id }));
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+    const arg = { some: "arg" };
+    expect(url).toBe(compile(API_FUNCTION)({ id }));
+    func(url, { arg });
+
+    expect(apiJsonPatch).toHaveBeenCalledWith(url, arg);
+  });
+  it("useFunctionUpdate without args will render id 0", () => {
+    renderHook(() => useFunctionUpdate());
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+    const arg = { some: "arg" };
+    expect(url).toBe(compile(API_FUNCTION)({ id: 0 }));
+    func(url, { arg });
+    expect(apiJsonPatch).toHaveBeenCalledWith(url, arg);
+  });
+  it("useFunctionDelete calls useSWRMutations with correct api route", () => {
+    const id = 8;
+    renderHook(() => useFunctionDelete({ id }));
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+    const arg = { some: "arg" };
+    expect(url).toBe(compile(API_FUNCTION)({ id }));
+    func(url, { arg });
+
+    expect(apiJsonDelete).toHaveBeenCalledWith(url, arg);
+  });
+  it("useFunctionDelete without args will render id 0", () => {
+    renderHook(() => useFunctionDelete());
+    const [url, func] = _.last(useSWRMutations.mock.calls);
+    const arg = { some: "arg" };
+    expect(url).toBe(compile(API_FUNCTION)({ id: 0 }));
+    func(url, { arg });
+    expect(apiJsonDelete).toHaveBeenCalledWith(url, arg);
+  });
+});

package/src/hooks/useFunctions.js

@@ -0,0 +1,33 @@
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import {
+  apiJson,
+  apiJsonPost,
+  apiJsonPatch,
+  apiJsonDelete,
+} from "@truedat/core/services/api";
+import { API_FUNCTIONS, API_FUNCTION } from "../api";
+
+export const useFunctions = () => {
+  const { data, error, mutate } = useSWR(API_FUNCTIONS, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};
+
+export const useFunctionCreate = () => {
+  return useSWRMutations(API_FUNCTIONS, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};
+
+export const useFunctionUpdate = (func) => {
+  const id = func?.id || 0;
+  const url = compile(API_FUNCTION)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
+};
+
+export const useFunctionDelete = (func) => {
+  const id = func?.id || 0;
+  const url = compile(API_FUNCTION)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonDelete(url, arg));
+};

package/src/styles/Expression.less

@@ -0,0 +1,102 @@
+.no-padding {
+  padding: 0;
+}
+
+.no-margin {
+  margin: 0 !important;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+}
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.expression-container {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.shape-selector-trigger {
+  width: 38px;
+  height: 38px;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  font-family: monospace;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.function-params-label {
+  display: flex;
+  flex: 1;
+  justify-content: right;
+}
+
+.param-label-header {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 4px 0;
+}
+
+.param-label-description {
+    font-style: italic;
+    color: gray;
+    font-size: 13;
+    padding-left: 5px;
+}
+
+ul.function-tree {
+  list-style-type: none;
+  padding: 0;
+  margin-left: 2.18em;
+  margin-top: -0.2em;
+  transition: max-height 0.3s ease-out;
+}
+
+.function-tree li {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.function-tree li {
+  list-style-type: none;
+  margin: 10px 0 10px 10px;
+  position: relative;
+}
+.function-tree li:before {
+  content: "";
+  position: absolute;
+  top: -10px;
+  left: -20px;
+  border-left: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  width: 20px;
+  height: 15px;
+  height: 30px;
+}
+.function-tree li:after {
+  position: absolute;
+  content: "";
+  top: 5px;
+  top: 19px;
+  left: -20px;
+  border-left: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+  width: 20px;
+  height: 100%;
+}
+.function-tree li:last-child:after {
+  display: none;
+}

package/src/types.js

@@ -0,0 +1,38 @@
+import _ from "lodash/fp";
+
+export const types = [
+  "boolean",
+  "string",
+  "numeric",
+  "date",
+  "timestamp",
+  "any",
+];
+export default types;
+
+export const typeToIcon = (value) => {
+  return _.pathOr(
+    "question circle outline",
+    value
+  )({
+    string: "font",
+    numeric: "hashtag",
+    date: "calendar alternate outline",
+    timestamp: "clock outline",
+    // "any": "asterisk",
+    boolean: "adjust",
+  });
+};
+
+export const typeToColor = (value) => {
+  return _.pathOr(
+    "grey",
+    value
+  )({
+    boolean: "teal",
+    string: "purple",
+    numeric: "blue",
+    date: "olive",
+    timestamp: "brown",
+  });
+};