@beinformed/ui 1.65.12 → 1.65.14

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

@@ -1,117 +0,0 @@
-// @flow
-import { getLuminance, parseToRgb } from "polished";
-
-import { getThemeStringProp, getProp } from "./themeProps";
-
-import { ThemePropertyException } from "../../exceptions";
-
-import type { Theme, UtilThemeProps } from "../types";
-
-/**
- * calculate the contrast ratio of two colors
- */
-const getColorContrast = (color1: string, color2: string): number => {
-  const luminance1 = getLuminance(color1);
-  const luminance2 = getLuminance(color2);
-  return parseFloat(
-    (luminance1 > luminance2
-      ? (luminance1 + 0.05) / (luminance2 + 0.05)
-      : (luminance2 + 0.05) / (luminance1 + 0.05)
-    ).toFixed(2),
-  );
-};
-
-/*
- * The YIQ equation converts the RGB color (0 to 255) into a YIQ color space.
- * YIQ is the standard formula for calculating the perceived brightness of a color,
- * and is recommended by the World Wide Web Consortium (W3C).
- */
-/**
- */
-const getYIQ = (color: string): number => {
-  const rgb = parseToRgb(color);
-
-  return (rgb.red * 299 + rgb.green * 587 + rgb.blue * 114) / 1000;
-};
-
-/**
- * Get dark or light color, depending on the given color
- * When the contrast between the color and the light or dark color is too low,
- * the preferred color is returned
- */
-const getContrastYIQ = (
-  color: string,
-  dark: string = "#212529",
-  light: string = "#fff",
-  preferredColor?: string,
-): string => {
-  const yiqColor = getYIQ(color);
-
-  if (preferredColor && getColorContrast(color, preferredColor) >= 4.5) {
-    return preferredColor;
-  }
-
-  const darkColor = getYIQ(dark) < 127.5 ? dark : "#212529";
-  const lightColor = getYIQ(light) > 127.5 ? light : "#fff";
-
-  if (yiqColor > 127.5) {
-    if (getColorContrast(color, darkColor) < 3) {
-      return "#212529";
-    }
-
-    return darkColor;
-  }
-
-  if (getColorContrast(color, lightColor) < 3) {
-    return "#fff";
-  }
-  return lightColor;
-};
-
-/**
- */
-const getBackgroundColor = (
-  theme: Theme,
-  bgColorProperty: string,
-  defaultValue: string,
-) => {
-  let bgColor = getProp(theme, bgColorProperty, defaultValue);
-
-  if (typeof bgColor === "object") {
-    bgColor = bgColor?.backgroundColor ?? defaultValue;
-  }
-
-  if (typeof bgColor === "string") {
-    return bgColor;
-  }
-
-  throw new ThemePropertyException(
-    `${bgColorProperty} is not a string, but: ${typeof bgColor}`,
-  );
-};
-
-/**
- * Retrieve the contrast color for the given background property,
- * based on theme properties
- */
-const renderContrastColor =
-  (
-    bgColorProperty: string,
-    preferredColorProperty?: string,
-    standardDarkProperty: string = "YIQ_DARK_COLOR",
-    standardLightProperty: string = "YIQ_LIGHT_COLOR",
-  ): ((UtilThemeProps) => string) =>
-  ({ theme = { settings: {} } }: UtilThemeProps) => {
-    const bgColor = getBackgroundColor(theme, bgColorProperty, "#ffffff");
-    const preferredColor = getThemeStringProp(theme, preferredColorProperty);
-    const darkColor = getThemeStringProp(
-      theme,
-      standardDarkProperty,
-      "#212529",
-    );
-    const lightColor = getThemeStringProp(theme, standardLightProperty, "#fff");
-
-    return getContrastYIQ(bgColor, darkColor, lightColor, preferredColor);
-  };
-
-export { getColorContrast, getYIQ, getContrastYIQ, renderContrastColor };

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

@@ -1,37 +0,0 @@
-// @flow
-import { getThemeStringProp } from "./themeProps";
-
-import type { UtilThemeProps } from "../types";
-
-const DEFAULT_CORNER_PROPERTY = "border-radius";
-
-/*
- * Border radius based on the theme setting for rounded corners
- * When ROUNDED_CORNERS is not true in the theme, no rounded corners are returned
- */
-/**
- */
-const roundedCorners =
-  (
-    property: string = DEFAULT_CORNER_PROPERTY,
-    path: string = "BORDER_RADIUS",
-    defaultValue: string = "0.25rem",
-  ): ((UtilThemeProps) => string) =>
-  ({ theme = { settings: {} } }: UtilThemeProps) => {
-    if (theme.ROUNDED_CORNERS) {
-      const propertyName =
-        property && property !== DEFAULT_CORNER_PROPERTY
-          ? `border-${property}-radius`
-          : DEFAULT_CORNER_PROPERTY;
-
-      return `${propertyName}: ${getThemeStringProp(
-        theme,
-        path,
-        defaultValue,
-      )}`;
-    }
-
-    return "";
-  };
-
-export { roundedCorners };

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

@@ -1,65 +0,0 @@
-// @flow
-import Big from "big.js";
-
-import type { Theme, UtilThemeProps } from "../types";
-import IllegalArgumentException from "../../exceptions/IllegalArgumentException";
-import IllegalStateException from "../../exceptions/IllegalStateException";
-
-/**
- */
-const getSize = (
-  theme: Theme,
-  ratio: number | string = 1,
-  path: string = "SPACER",
-  unit: string = "rem",
-) => {
-  if (typeof ratio === "string") {
-    return ratio;
-  }
-
-  if (typeof ratio === "number") {
-    if (typeof theme[path] === "number") {
-      const size = Big(ratio).times(theme[path]);
-      return `${size}${unit}`;
-    }
-    throw new IllegalStateException(`Size ${path} must be a number`);
-  }
-
-  throw new IllegalArgumentException(
-    `Ratio ${JSON.stringify(ratio)} must be a string or number`,
-  );
-};
-
-/*
- * Render spacers based on the given ratio * theme SPACER
- */
-/**
- */
-const spacer =
-  (ratio: number = 1): ((UtilThemeProps) => string) =>
-  ({ theme = { settings: {} } }: UtilThemeProps) =>
-    getSize(theme, ratio);
-
-/*
- * Render spacers based on the given ratio * theme SPACER
- * Ratio's can be given clockwise with shorthand,
- * spacers(0.5, 1) with a spacer of 0.8 will give "0.4rem 1rem";
- */
-/**
- */
-const spacers =
-  (...ratios: Array<number | "auto">): ((UtilThemeProps) => string) =>
-  ({ theme = { settings: {} } }: UtilThemeProps) =>
-    ratios.map((ratio) => getSize(theme, ratio)).join(" ");
-
-/*
- * Render a gutter based on GUTTER property
- */
-/**
- */
-const gutter =
-  (ratio: number = 1): ((UtilThemeProps) => string) =>
-  ({ theme = { settings: {} } }: UtilThemeProps) =>
-    getSize(theme, ratio, "GRID_GUTTER", "px");
-
-export { spacer, spacers, gutter };

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

@@ -1,90 +0,0 @@
-// @flow
-import { get } from "../../utils/helpers/objects";
-
-import { ThemePropertyException } from "../../exceptions";
-
-import type { Theme, ThemePropValue } from "../types";
-
-/**
- */
-export const getProp = (
-  theme: $Shape<Theme> = {},
-  path: string = "",
-  defaultValue: ThemePropValue = "",
-): ?ThemePropValue => {
-  return path === "" ? defaultValue : get(theme, path, defaultValue);
-};
-
-/**
- */
-export const getThemeProp = (
-  theme: $Shape<Theme> = {},
-  path: string = "",
-  defaultValue: ThemePropValue = "",
-): ThemePropValue => {
-  const value = getProp(theme, path, defaultValue);
-
-  if (
-    value != null &&
-    (typeof value === "string" ||
-      typeof value === "number" ||
-      typeof value === "object")
-  ) {
-    return value;
-  }
-
-  throw new ThemePropertyException(
-    `${path} is not a string, number or plain object, but: ${typeof value}`,
-  );
-};
-
-/**
- */
-export const getThemeStringProp = (
-  theme: $Shape<Theme> = {},
-  path: string = "",
-  defaultValue: string = "",
-): string => {
-  const value = getProp(theme, path, defaultValue);
-
-  if (typeof value === "string") {
-    return value;
-  } else if (typeof value === "number") {
-    return value.toString();
-  }
-
-  throw new ThemePropertyException(
-    `${path} is not a string, but: ${typeof value}`,
-  );
-};
-
-/**
- */
-export const getThemeNumberProp = (
-  theme: $Shape<Theme> = {},
-  path: string = "",
-  defaultValue: number = 0,
-): number => {
-  const value = getProp(theme, path, defaultValue);
-
-  if (typeof value === "number") {
-    return value;
-  }
-
-  throw new ThemePropertyException(
-    `${path} is not a number, but: ${typeof value}`,
-  );
-};
-
-/*
- * Retrieve property value from theme property of styled component
- */
-/**
- */
-export const themeProp =
-  (
-    path: string,
-    defaultValue?: ThemePropValue,
-  ): (({ theme: Theme }) => ThemePropValue) =>
-  ({ theme }: { theme: Theme }) =>
-    getThemeProp(theme, path, defaultValue);

package/src/redux/_i18n/I18nActions.js

@@ -1,38 +0,0 @@
-// @flow
-import { startProgress, finishProgress } from "../actions/ProgressIndicator";
-
-import type Locales from "../../i18n/Locales";
-import type { SetLocalesAction, UpdateLocaleAction } from "./types";
-import type { ThunkAction } from "../types";
-
-/**
- * Update current locale
- */
-export const receiveLocale = (locale: string): UpdateLocaleAction => ({
-  type: "UPDATE_LOCALE",
-  payload: locale,
-});
-
-/**
- * Change locale of application and redirect
- */
-export const updateLocale =
-  (locale: string): ThunkAction =>
-  (dispatch) => {
-    dispatch(startProgress());
-    dispatch(receiveLocale(locale));
-    dispatch(finishProgress());
-  };
-
-/**
- */
-export const setLocales = (
-  locales: Locales,
-  locale: string,
-): SetLocalesAction => ({
-  type: "SET_LOCALES",
-  payload: {
-    locales,
-    locale,
-  },
-});

package/src/redux/_i18n/I18nReducer.js

@@ -1,91 +0,0 @@
-// @flow
-import Cache from "../../utils/browser/Cache";
-import { setCookie, clearCookie } from "../../utils/browser/Cookies";
-
-import Locales from "../../i18n/Locales";
-
-import type { Reducer } from "redux";
-import type { I18nState } from "./types";
-import type { ReduxAction } from "../types";
-
-/**
- */
-const updateLocale = (state: I18nState, locale: string) => {
-  // set locale in cookie
-  if (state.locales?.length > 1) {
-    setCookie("locale", locale);
-  } else {
-    clearCookie("locale");
-  }
-
-  // clear cache because of cached contributions
-  Cache.clear();
-
-  return {
-    ...state,
-    locale,
-  };
-};
-
-/**
- */
-const setLocales = (
-  state: I18nState,
-  { locale, locales }: { locale: string, locales: Locales },
-) => {
-  // set locale in cookie
-  if (state.locales.length > 1) {
-    setCookie("locale", locale);
-  } else {
-    clearCookie("locale");
-  }
-
-  if (locale) {
-    return {
-      ...state,
-      locales,
-      locale,
-    };
-  }
-
-  return {
-    ...state,
-    locales,
-  };
-};
-
-const getDefaultLocale = () => {
-  if (typeof navigator !== "undefined" && navigator?.language) {
-    return navigator?.language.split("-")[0] || "en";
-  }
-  return "en";
-};
-
-// REDUCER
-const initialState: I18nState = {
-  locales: new Locales(),
-  locale: getDefaultLocale(),
-};
-
-/**
- * Form reducer
- */
-export const I18nReducer: Reducer<I18nState, ReduxAction> = (
-  state = initialState,
-  action = void 0,
-) => {
-  if (!action) {
-    return state;
-  }
-
-  switch (action.type) {
-    case "SET_LOCALES":
-      return setLocales(state, action.payload);
-
-    case "UPDATE_LOCALE":
-      return updateLocale(state, action.payload);
-
-    default:
-      return state;
-  }
-};

package/src/redux/_i18n/__tests__/actions.spec.js

@@ -1,37 +0,0 @@
-import configureMockStore from "redux-mock-store";
-import thunk from "redux-thunk";
-
-import { receiveLocale, updateLocale } from "../I18nActions";
-
-const middlewares = [thunk];
-const mockStore = configureMockStore(middlewares);
-
-describe("modularui actions", () => {
-  it("can receive locale", () => {
-    const store = mockStore({ i18n: {} });
-
-    store.dispatch(receiveLocale("de"));
-
-    expect(store.getActions()).toStrictEqual([
-      {
-        type: "UPDATE_LOCALE",
-        payload: "de",
-      },
-    ]);
-  });
-
-  it("can update locale", () => {
-    const store = mockStore({ i18n: {} });
-
-    store.dispatch(updateLocale("de"));
-
-    expect(store.getActions()).toStrictEqual([
-      { type: "START_PROGRESS" },
-      {
-        type: "UPDATE_LOCALE",
-        payload: "de",
-      },
-      { type: "FINISH_PROGRESS" },
-    ]);
-  });
-});

package/src/redux/_i18n/__tests__/reducer.spec.js

@@ -1,29 +0,0 @@
-import { I18nReducer } from "../I18nReducer";
-import { Locales } from "../../../i18n";
-
-describe("i18n reducer", () => {
-  it("should return the initial state", () => {
-    expect(I18nReducer(undefined, {})).toStrictEqual({
-      locales: new Locales(),
-      locale: "en",
-    });
-    expect(I18nReducer()).toStrictEqual({
-      locales: new Locales(),
-      locale: "en",
-    });
-  });
-
-  it("should handle UPDATE_LOCALE", () => {
-    expect(
-      I18nReducer(
-        {},
-        {
-          type: "UPDATE_LOCALE",
-          payload: "de",
-        },
-      ),
-    ).toStrictEqual({
-      locale: "de",
-    });
-  });
-});

package/src/redux/_i18n/index.js

@@ -1,6 +0,0 @@
-// @flow
-export * from "./I18nReducer";
-
-export * from "./I18nActions";
-
-export type * from "./types";

package/src/redux/_i18n/types.js

@@ -1,20 +0,0 @@
-// @flow
-import type Locales from "../../i18n/Locales";
-
-export type I18nState = {
-  +locales: Locales,
-  +locale: string,
-};
-
-export type UpdateLocaleAction = {
-  type: "UPDATE_LOCALE",
-  payload: string,
-};
-
-export type SetLocalesAction = {
-  type: "SET_LOCALES",
-  payload: {
-    locales: Locales,
-    locale: string,
-  },
-};