@beinformed/ui 1.65.13 → 1.65.14

package/src/react-theme/__tests__/createTheme.spec.js

@@ -1,172 +0,0 @@
-import createTheme from "../createTheme";
-
-import { getContrastYIQ } from "../utils/contrast";
-
-describe("createTheme", () => {
-  it("merges themes", () => {
-    const config = {
-      PROP1: "Value",
-      PROP3: "$PROP1 3",
-      PROP7: "$PROP6",
-    };
-
-    /**
-     */
-    const themeFn = (input) => ({
-      ...input,
-      PROP2: "Value 2",
-      PROP3: "Overwrite Prop 3",
-      PROP4: "$PROP2",
-    });
-
-    const secondConfig = {
-      PROP5: "Value 5",
-    };
-
-    /**
-     */
-    const secondFn = (input) => ({
-      ...input,
-      PROP6: "Value 6",
-    });
-
-    const finalTheme = createTheme(
-      null,
-      {},
-      [config, themeFn],
-      secondConfig,
-      secondFn,
-    );
-
-    expect(finalTheme).toStrictEqual(
-      expect.objectContaining({
-        PROP1: "Value",
-        PROP2: "Value 2",
-        PROP3: "Overwrite Prop 3",
-        PROP4: "Value 2",
-        PROP5: "Value 5",
-        PROP6: "Value 6",
-        PROP7: "Value 6",
-      }),
-    );
-  });
-
-  it("can overwrite styles from theme methods", () => {
-    const config = {
-      PRIMARY_COLOR: "#0065d1",
-    };
-
-    const getButtonColor = (name, color) => ({
-      [`${name}_BG`]: color,
-    });
-
-    /**
-     */
-    const themeFn = (
-      input = {
-        PRIMARY_COLOR: "#0065d1",
-      },
-    ) => ({
-      ...input,
-      ...getButtonColor("BUTTON_PRIMARY", input.PRIMARY_COLOR),
-    });
-
-    const secondConfig = {
-      BUTTON_PRIMARY_BG: "#000",
-    };
-
-    const finalTheme = createTheme(null, config, themeFn, secondConfig);
-
-    expect(finalTheme.BUTTON_PRIMARY_BG).toBe("#000");
-  });
-
-  it("can use multiple objects and functions", () => {
-    const config1 = {
-      FIRST_CONFIG: "OVERWRITE_FIRST",
-    };
-
-    const config2 = {
-      FIRST_CONFIG: "FIRST",
-      SECOND_CONFIG: "OVERWRITE_SECOND",
-    };
-
-    const themeFn1 = (input) => ({
-      ...input,
-      SECOND_CONFIG: "SECOND",
-      FIRST_FUNCTION: "$FIRST_CONFIG",
-    });
-
-    const themeFn2 = (input) => ({
-      ...input,
-      SECOND_FUNCTION: "$SECOND_CONFIG",
-    });
-
-    const finalTheme = createTheme(null, config1, config2, themeFn1, themeFn2);
-
-    expect(finalTheme).toStrictEqual({
-      settings: {},
-      FIRST_CONFIG: "FIRST",
-      SECOND_CONFIG: "SECOND",
-      FIRST_FUNCTION: "FIRST",
-      SECOND_FUNCTION: "SECOND",
-    });
-  });
-
-  it("test", () => {
-    const DefaultTheme = {
-      PRIMARY_COLOR: "#0000ff",
-      SECONDARY_COLOR: "#00ff00",
-      BUTTON_COLOR: "$PRIMARY_COLOR",
-    };
-
-    const createDefaultTheme = (input) => ({
-      ...input,
-      BUTTON_BG: getContrastYIQ(input.BUTTON_COLOR),
-    });
-
-    const CustomTheme = {
-      PRIMARY_COLOR: "#ff0000",
-    };
-
-    const theme = createTheme(
-      null,
-      DefaultTheme,
-      CustomTheme,
-      createDefaultTheme,
-    );
-
-    expect(theme).toStrictEqual({
-      settings: {},
-      BUTTON_BG: "#fff",
-      BUTTON_COLOR: "#ff0000",
-      PRIMARY_COLOR: "#ff0000",
-      SECONDARY_COLOR: "#00ff00",
-    });
-  });
-
-  it("replaces whole words only", () => {
-    const DefaultTheme = {
-      PRIMARY_COLOR: "#0000ff",
-      SECONDARY_COLOR: "#00ff00",
-      BUTTON_COLOR: "$PRIMARY_COLOR",
-    };
-
-    const CustomTheme = {
-      RED: "#ff0000",
-      RED_OUTLINE: "#D32F2F",
-      WARNING: "$RED_OUTLINE",
-    };
-
-    const theme = createTheme(null, DefaultTheme, CustomTheme);
-
-    expect(theme).toStrictEqual({
-      settings: {},
-      PRIMARY_COLOR: "#0000ff",
-      SECONDARY_COLOR: "#00ff00",
-      BUTTON_COLOR: "#0000ff",
-      RED: "#ff0000",
-      RED_OUTLINE: "#D32F2F",
-      WARNING: "#D32F2F",
-    });
-  });
-});

package/src/react-theme/createTheme.js

@@ -1,118 +0,0 @@
-// @flow
-import flattenDeep from "lodash/flattenDeep";
-
-import { isPlainObject } from "../utils/helpers/objects";
-
-import { setSettings } from "../constants/Settings";
-
-import type { Theme } from "./types";
-
-const replacePlaceholders = (inputTheme: Theme) => {
-  const possibleKeys = Object.keys(inputTheme)
-    .map((key) => `\\b${key}\\b`)
-    .join("|");
-
-  const re = new RegExp(`\\$(${possibleKeys})`, "g");
-  Object.entries(inputTheme).forEach(([key, value]) => {
-    if (key !== "settings" && typeof value === "string") {
-      inputTheme[key] = value.replace(
-        re,
-        // $FlowIssue[incompatible-call]
-        (match, capture) => inputTheme[capture],
-      );
-    }
-  });
-
-  return inputTheme;
-};
-
-const generateTheme = (storedTheme: Theme, ...themeElements: Array<Theme>) => {
-  const storedSettings = storedTheme?.settings ?? {};
-
-  let generatedTheme = { settings: {} };
-  for (const element of themeElements) {
-    if (typeof element === "function") {
-      generatedTheme = element(replacePlaceholders(generatedTheme));
-    } else if (isPlainObject(element)) {
-      const generatedSettings = generatedTheme.settings;
-      // $FlowFixMe[cannot-spread-indexer]
-      generatedTheme = { ...generatedTheme, ...element, ...storedTheme };
-      if ("settings" in element) {
-        generatedTheme.settings = {
-          ...generatedSettings,
-          ...element.settings,
-          ...storedSettings,
-        };
-      }
-    }
-  }
-
-  // final - replace any assignments inside the theme
-  return replacePlaceholders(generatedTheme);
-};
-
-/**
- * Create a theme from multiple theme configuration objects.
- * Properties are overwriten by iterating the configuration objects from left to right.
- *
- * The first argument represents a stored theme part, this is optional. The stored theme part will overwrite every part in the collection of theme parts.
- * Thus a stored configuration is leading as it can be configured by a modeller through the repository.
- *
- * Placeholders can be used, they are replaced before calling a function theme part or at the end of the theme creation.
- *
- * Both objects and function can be used, where a function receives the previous objects as input arguments.
- * For example using the method createTheme(ThemeObject, ThemeObject2, ThemeFunction, ThemeFunction2), will be handled as:
- *
- * ThemeFunction2(ThemeFunction1({ ...ThemeObject, ...ThemeObject2 }))
- *
- * @example
- * Example where the primary color of the default theme is overwritten with a primary color of the custom theme,
- * but the button bg still uses the yiq function of the default theme:
- *
- * const DefaultTheme = {
- *   PRIMARY_COLOR: "#0000ff",
- *   SECONDARY_COLOR: "#00ff00",
- *   BUTTON_COLOR: "$PRIMARY_COLOR"
- * }
- *
- * const createDefaultTheme = (input) => ({
- *   ...input,
- *   BUTTON_BG: getContrastYIQ(input.BUTTON_COLOR)
- * })
- *
- * const CustomTheme = {
- *   PRIMARY_COLOR: "#ff0000"
- * }
- *
- * createTheme(null, DefaultTheme, CustomTheme, createDefaultTheme);
- *
- * // Result:
- * {
- *   PRIMARY_COLOR: "#ff0000",
- *   BUTTON_COLOR: "#ff0000",
- *   BUTTON_BG: "#fff",
- *   SECONDARY_COLOR: "#00ff00",
- * }
- */
-const createTheme = (
-  storedTheme: Theme,
-  ...themeConfigs: Array<Theme | Array<Theme> | void>
-):
-  | any
-  | {}
-  | {
-      INPUT_FOCUS_BORDER_COLOR?: string,
-      LINK_HOVER_COLOR?: string,
-      PAGING_HOVER_COLOR?: string,
-      settings?: { [settingName: string]: string },
-    } => {
-  const customTheme = generateTheme(storedTheme, ...flattenDeep(themeConfigs));
-
-  if (customTheme) {
-    setSettings(customTheme.settings);
-  }
-
-  return customTheme;
-};
-
-export default createTheme;

package/src/react-theme/index.js

@@ -1,15 +0,0 @@
-// @flow
-export { default as createTheme } from "./createTheme";
-export { default as ThemeProvider } from "./ThemeProvider";
-
-export * from "./useTheme";
-
-export * from "./utils/themeProps";
-
-export * from "./utils/background";
-export * from "./utils/colors";
-export * from "./utils/contrast";
-export * from "./utils/corners";
-export * from "./utils/spacers";
-
-export type * from "./types";

package/src/react-theme/types.js

@@ -1,16 +0,0 @@
-// @flow
-export type ThemePropValue =
-  | string
-  | number
-  | { [key: string]: ThemePropValue, ... };
-
-export type UtilThemeProps = {
-  theme: Theme,
-  ...
-};
-
-export type Theme = {
-  settings: { [settingName: string]: string },
-  [key: string]: ThemePropValue,
-  ...
-};

package/src/react-theme/useTheme.js

@@ -1,13 +0,0 @@
-// @flow
-import { useContext } from "react";
-import { ThemeContext } from "styled-components";
-
-import type { Theme } from "./types";
-
-/**
- */
-const useTheme = (): Theme => {
-  return useContext(ThemeContext);
-};
-
-export { useTheme };

package/src/react-theme/utils/__tests__/background.spec.js

@@ -1,30 +0,0 @@
-import { renderBackground } from "../background";
-import { linearGradient } from "polished";
-
-describe("background", () => {
-  const theme = {
-    SIMPLE_BG: "#000000",
-    GRADIENT_BG: linearGradient({
-      colorStops: [`#000000 95%`, `#000000 100%`],
-      toDirection: "to bottom",
-      fallback: "#000000",
-    }),
-  };
-
-  it("retrieves functions that accept the theme", () => {
-    expect(typeof renderBackground()).toBe("function");
-  });
-
-  it("renderBackground", () => {
-    expect(renderBackground("SIMPLE_BG", "DEFAULT")({ theme })).toBe(
-      "background: #000000",
-    );
-    expect(renderBackground("GRADIENT_BG", "DEFAULT")({ theme })).toStrictEqual(
-      {
-        backgroundColor: "#000000",
-        backgroundImage:
-          "linear-gradient(to bottom, #000000 95%, #000000 100%)",
-      },
-    );
-  });
-});

package/src/react-theme/utils/__tests__/colors.spec.js

@@ -1,30 +0,0 @@
-import { darkenColor, lightenColor, changeHSL } from "../colors";
-
-describe("colors", () => {
-  const theme = {
-    RED: "#ff0000",
-    GREEN: "#00ff00",
-    BLUE: "#0000ff",
-  };
-
-  it("retrieves functions that accept the theme", () => {
-    expect(typeof darkenColor()).toBe("function");
-    expect(typeof lightenColor()).toBe("function");
-  });
-
-  it("darkenColor", () => {
-    expect(darkenColor(0.2, "RED")({ theme })).toBe("#900");
-    expect(darkenColor(0.2, "GREEN")({ theme })).toBe("#090");
-    expect(darkenColor(0.2, "BLUE")({ theme })).toBe("#009");
-  });
-
-  it("lightenColor", () => {
-    expect(lightenColor(0.2, "RED")({ theme })).toBe("#f66");
-    expect(lightenColor(0.2, "GREEN")({ theme })).toBe("#6f6");
-    expect(lightenColor(0.2, "BLUE")({ theme })).toBe("#66f");
-  });
-
-  it("changeHSL", () => {
-    expect(changeHSL("green", 0.5, 0.1, 3)).toBe("#0d260e");
-  });
-});

package/src/react-theme/utils/__tests__/contrast.spec.js

@@ -1,44 +0,0 @@
-import {
-  getColorContrast,
-  getYIQ,
-  getContrastYIQ,
-  renderContrastColor,
-} from "../contrast";
-
-describe("contrast", () => {
-  const theme = {
-    RED: "#ff0000",
-    GREEN: "#00ff00",
-    BLUE: "#0000ff",
-    YELLOW: "#ffff00",
-  };
-
-  it("retrieves functions that accept the theme", () => {
-    expect(typeof renderContrastColor()).toBe("function");
-  });
-
-  it("getColorContrast", () => {
-    expect(getColorContrast("red", "green")).toBe(1.29);
-    expect(getColorContrast("green", "red")).toBe(1.29);
-  });
-
-  it("getYIQ", () => {
-    expect(getYIQ("red")).toBe(76.245);
-    expect(getYIQ("green")).toBe(75.136);
-    expect(getYIQ("blue")).toBe(29.07);
-  });
-
-  it("getContrastYIQ", () => {
-    expect(getContrastYIQ("black")).toBe("#fff");
-    expect(getContrastYIQ("white")).toBe("#212529");
-    expect(getContrastYIQ("black", "red", "yellow")).toBe("yellow");
-    expect(getContrastYIQ("white", "red", "yellow")).toBe("red");
-    expect(getContrastYIQ("yellow", "red", "yellow", "blue")).toBe("blue");
-  });
-
-  it("renderContrastColor", () => {
-    expect(
-      renderContrastColor("RED", "GREEN", "BLUE", "YELLOW")({ theme }),
-    ).toBe("#ffff00");
-  });
-});

package/src/react-theme/utils/__tests__/corners.spec.js

@@ -1,27 +0,0 @@
-import { roundedCorners } from "../corners";
-
-describe("corners", () => {
-  const theme = {
-    ROUNDED_CORNERS: true,
-    BORDER_RADIUS: "0.2rem",
-    SECOND_BORDER_RADIUS: "0.4rem",
-  };
-
-  it("retrieves functions that accept the theme", () => {
-    expect(typeof roundedCorners()).toBe("function");
-  });
-
-  it("roundedCorners", () => {
-    expect(roundedCorners()({ theme: { ROUNDED_CORNERS: false } })).toBe("");
-    expect(roundedCorners()({ theme: { ROUNDED_CORNERS: true } })).toBe(
-      "border-radius: 0.25rem",
-    );
-    expect(roundedCorners()({ theme })).toBe("border-radius: 0.2rem");
-    expect(
-      roundedCorners("border-radius", "SECOND_BORDER_RADIUS")({ theme }),
-    ).toBe("border-radius: 0.4rem");
-    expect(
-      roundedCorners("left", "THIRD_BORDER_RADIUS", "0.3rem")({ theme }),
-    ).toBe("border-left-radius: 0.3rem");
-  });
-});

package/src/react-theme/utils/__tests__/spacers.spec.js

@@ -1,44 +0,0 @@
-import { spacer, spacers, gutter } from "../spacers";
-import IllegalArgumentException from "../../../exceptions/IllegalArgumentException";
-import IllegalStateException from "../../../exceptions/IllegalStateException";
-
-describe("spacers", () => {
-  const theme = {
-    SPACER: 0.8,
-    GRID_SIZE: 12,
-    GRID_GUTTER: 15,
-  };
-
-  it("retrieves functions that accept the theme", () => {
-    expect(typeof spacer()).toBe("function");
-    expect(typeof spacers()).toBe("function");
-    expect(typeof gutter()).toBe("function");
-  });
-
-  it("retrieves a spacer unit", () => {
-    expect(spacer(2)({ theme })).toBe("1.6rem");
-    expect(spacer(0.5)({ theme })).toBe("0.4rem");
-    expect(spacer("auto")({ theme })).toBe("auto");
-    expect(() => spacer([22.2])({ theme })).toThrow(IllegalArgumentException);
-  });
-
-  it("throws on illegal SPACER in theme", () => {
-    expect(() => spacer(2)({ theme: { SPACER: "auto" } })).toThrow(
-      IllegalStateException,
-    );
-  });
-
-  it("retrieves a spacers unit", () => {
-    expect(spacers(2)({ theme })).toBe("1.6rem");
-    expect(spacers(2, 3)({ theme })).toBe("1.6rem 2.4rem");
-    expect(spacers(2, 3, 4)({ theme })).toBe("1.6rem 2.4rem 3.2rem");
-    expect(spacers(2, 3, 4, 5)({ theme })).toBe("1.6rem 2.4rem 3.2rem 4rem");
-    expect(spacers("auto")({ theme })).toBe("auto");
-  });
-
-  it("handles gutter", () => {
-    expect(gutter(2)({ theme })).toBe("30px");
-    expect(gutter(0.5)({ theme })).toBe("7.5px");
-    expect(gutter("auto")({ theme })).toBe("auto");
-  });
-});

package/src/react-theme/utils/__tests__/themeProps.spec.js

@@ -1,72 +0,0 @@
-import {
-  getThemeProp,
-  getThemeStringProp,
-  getThemeNumberProp,
-} from "../../index";
-import ThemePropertyException from "../../../exceptions/ThemePropertyException";
-
-const STRING_PROP_VALUE = "This is a string prop";
-
-describe("createTheme", () => {
-  const theme = {
-    STRING_PROP: STRING_PROP_VALUE,
-    NUMBER_PROP: 12345,
-    OBJECT_PROP: {
-      key: "value",
-    },
-    /**
-     */
-    FUNCTION_PROP: () => "function result",
-    NULL_PROP: null,
-  };
-
-  it("getThemeProp", () => {
-    expect(getThemeProp(theme, "STRING_PROP", "DEFAULT")).toBe(
-      STRING_PROP_VALUE,
-    );
-    expect(getThemeProp(theme, "NUMBER_PROP", "DEFAULT")).toBe(12345);
-    expect(getThemeProp(theme, "OBJECT_PROP", "DEFAULT")).toStrictEqual({
-      key: "value",
-    });
-
-    expect(() => getThemeProp(theme, "FUNCTION_PROP", "DEFAULT")).toThrow(
-      ThemePropertyException,
-    );
-    expect(getThemeProp(theme, "NULL_PROP", "DEFAULT")).toBe("DEFAULT");
-    expect(getThemeProp(theme, "NOT_EXISTING", "DEFAULT")).toBe("DEFAULT");
-  });
-
-  it("getThemeStringProp", () => {
-    expect(getThemeStringProp(theme, "STRING_PROP", "DEFAULT")).toBe(
-      STRING_PROP_VALUE,
-    );
-    expect(getThemeStringProp(theme, "NUMBER_PROP", "DEFAULT")).toBe("12345");
-    expect(() => getThemeStringProp(theme, "OBJECT_PROP", "DEFAULT")).toThrow(
-      ThemePropertyException,
-    );
-
-    expect(() => getThemeStringProp(theme, "FUNCTION_PROP", "DEFAULT")).toThrow(
-      ThemePropertyException,
-    );
-    expect(getThemeStringProp(theme, "NULL_PROP", "DEFAULT")).toBe("DEFAULT");
-    expect(getThemeStringProp(theme, "NOT_EXISTING", "DEFAULT")).toBe(
-      "DEFAULT",
-    );
-  });
-
-  it("getThemeNumberProp", () => {
-    expect(() => getThemeNumberProp(theme, "STRING_PROP", 123)).toThrow(
-      ThemePropertyException,
-    );
-    expect(getThemeNumberProp(theme, "NUMBER_PROP", 123)).toBe(12345);
-    expect(() => getThemeNumberProp(theme, "OBJECT_PROP", 123)).toThrow(
-      ThemePropertyException,
-    );
-
-    expect(() => getThemeNumberProp(theme, "FUNCTION_PROP", 123)).toThrow(
-      ThemePropertyException,
-    );
-    expect(getThemeNumberProp(theme, "NULL_PROP", 123)).toBe(123);
-    expect(getThemeNumberProp(theme, "NOT_EXISTING", 123)).toBe(123);
-  });
-});

package/src/react-theme/utils/background.js

@@ -1,20 +0,0 @@
-// @flow
-import { getThemeProp } from "./themeProps";
-
-import type { ThemePropValue, UtilThemeProps } from "../types";
-
-/**
- */
-const renderBackground =
-  (path: string, defaultValue?: string): ((UtilThemeProps) => ThemePropValue) =>
-  ({ theme }: UtilThemeProps) => {
-    const value = getThemeProp(theme, path, defaultValue);
-
-    if (typeof value === "string") {
-      return `background: ${value}`;
-    }
-
-    return value;
-  };
-
-export { renderBackground };

package/src/react-theme/utils/colors.js

@@ -1,47 +0,0 @@
-// @flow
-import { darken, hsl, lighten, parseToHsl } from "polished";
-import { getThemeProp } from "./themeProps";
-
-import type { UtilThemeProps } from "../types";
-
-/*
- * Themed color x amount darkened
- */
-/**
- */
-const darkenColor =
-  (
-    amount: number | string,
-    path: string,
-    defaultValue?: string,
-  ): ((UtilThemeProps) => string) =>
-  ({ theme }: UtilThemeProps) =>
-    darken(amount, getThemeProp(theme, path, defaultValue));
-
-/*
- * Themed color x amount lightened
- */
-/**
- */
-const lightenColor =
-  (
-    amount: number | string,
-    path: string,
-    defaultValue?: string,
-  ): ((UtilThemeProps) => string) =>
-  ({ theme }: UtilThemeProps) =>
-    lighten(amount, getThemeProp(theme, path, defaultValue));
-
-/*
- * Make a color lighter or darker in the same color family
- */
-/**
- */
-const changeHSL = (
-  color: string,
-  saturation?: number,
-  lightness?: number,
-  hueAdjustment: number = 0,
-): string => hsl(parseToHsl(color).hue + hueAdjustment, saturation, lightness);
-
-export { darkenColor, lightenColor, changeHSL };