@dr.pogodin/react-utils 1.47.0-alpha.7 → 1.47.0-alpha.9

package/src/shared/components/selectors/NativeDropdown/index.tsx

@@ -1,90 +0,0 @@
-// Implements dropdown based on the native HTML <select> element.
-
-import themed from '@dr.pogodin/react-themes';
-
-import { type PropsT, optionValueName } from '../common';
-
-import defaultTheme from './theme.scss';
-
-/**
- * Implements a themeable dropdown list. Internally it is rendered with help of
- * the standard HTML `<select>` element, thus the styling support is somewhat
- * limited.
- * @param [props] Component properties.
- * @param [props.filter] Options filter function. If provided, only
- * those elements of `options` list will be used by the dropdown, for which this
- * filter returns `true`.
- * @param [props.label] Dropdown label.
- * @param [props.onChange] Selection event handler.
- * @param [props.options=[]] Array of dropdown
- * options. For string elements the option value and name will be the same.
- * It is allowed to mix DropdownOption and string elements in the same option
- * list.
- * @param [props.theme] _Ad hoc_ theme.
- * @param [props.value] Currently selected value.
- * @param [props....]
- * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
- */
-const Dropdown: React.FunctionComponent<PropsT<string>> = ({
-  filter,
-  label,
-  onChange,
-  options,
-  testId,
-  theme,
-  value,
-}) => {
-  let isValidValue = false;
-  const optionElements = [];
-
-  for (const option of options) {
-    if (!filter || filter(option)) {
-      const [iValue, iName] = optionValueName(option);
-      isValidValue ||= iValue === value;
-      optionElements.push(
-        <option className={theme.option} key={iValue} value={iValue}>
-          {iName}
-        </option>,
-      );
-    }
-  }
-
-  // NOTE: This element represents the current `value` when it does not match
-  // any valid option. In Chrome, and some other browsers, we are able to hide
-  // it from the opened dropdown; in others, e.g. Safari, the best we can do is
-  // to show it as disabled.
-  const hiddenOption = isValidValue ? null : (
-    <option
-      className={theme.hiddenOption}
-      disabled
-      key="__reactUtilsHiddenOption"
-      value={value}
-    >
-      {value}
-    </option>
-  );
-
-  let selectClassName = theme.select;
-  if (!isValidValue) selectClassName += ` ${theme.invalid}`;
-
-  return (
-    <div className={theme.container}>
-      { label === undefined
-        ? null : <div className={theme.label}>{label}</div> }
-      <div className={theme.dropdown}>
-        <select
-          className={selectClassName}
-          data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-          onChange={onChange}
-          value={value}
-        >
-          {hiddenOption}
-          {optionElements}
-        </select>
-        <div className={theme.arrow} />
-      </div>
-    </div>
-  );
-};
-
-export default themed(Dropdown, 'Dropdown', defaultTheme);

package/src/shared/components/selectors/NativeDropdown/theme.scss

@@ -1,81 +0,0 @@
-*,
-.context,
-.ad.hoc {
-  &.dropdown {
-    display: flex;
-    flex: 1;
-    min-width: 5.5em;
-    overflow: hidden;
-    position: relative;
-  }
-
-  &.arrow {
-    background-image: linear-gradient(to top, lightgray, white 50%, white);
-    border: 1px solid gray;
-    border-radius: 0 0.3em 0.3em 0;
-    bottom: 0;
-    padding: 0.3em 0.6em;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-
-    &::after {
-      content: '▼';
-    }
-  }
-
-  &.container {
-    align-items: center;
-    display: inline-flex;
-    margin: 0.1em;
-    position: relative;
-  }
-
-  .active + &.arrow,
-  :active + &.arrow {
-    background-image: linear-gradient(to bottom, lightgray, white 50%, white);
-    border-bottom-right-radius: 0;
-  }
-
-  :focus + &.arrow {
-    border-color: blue;
-    border-left-color: gray;
-  }
-
-  &.label {
-    margin: 0 0.6em 0 1.5em;
-    pointer-events: none;
-  }
-
-  &.option { color: black; }
-  &.hiddenOption { display: none; }
-
-  &.select {
-    appearance: none;
-    background: white;
-    border: 1px solid gray;
-    border-radius: 0.3em;
-    color: inherit;
-    cursor: pointer;
-    display: inline-block;
-    flex: 1;
-    font: inherit;
-    max-width: 100%;
-    outline: none;
-    padding: 0.3em 3.3em calc(0.3em + 1px) 1.2em;
-
-    &:active {
-      background: white;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:focus {
-      border-color: blue;
-      box-shadow: 0 0 3px 1px lightblue;
-    }
-
-    &.invalid { color: gray; }
-  }
-}

package/src/shared/components/selectors/Switch/index.tsx

@@ -1,74 +0,0 @@
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import {
-  type OptionsT,
-  type ValueT,
-  optionValueName,
-} from '../common';
-
-import defaultTheme from './theme.scss';
-
-type ThemeKeyT = 'container' | 'label' | 'option' | 'options' | 'selected';
-
-type PropsT = {
-  label?: React.ReactNode;
-  onChange?: (value: ValueT) => void;
-  options?: Readonly<OptionsT<React.ReactNode>>;
-  theme: Theme<ThemeKeyT>;
-  value?: ValueT;
-};
-
-const BaseSwitch: React.FunctionComponent<PropsT> = ({
-  label,
-  onChange,
-  options,
-  theme,
-  value,
-}) => {
-  if (!options || !theme.option) throw Error('Internal error');
-
-  const optionNodes: React.ReactNode[] = [];
-  for (const option of options) {
-    const [iValue, iName] = optionValueName(option);
-
-    let className: string = theme.option;
-    let onPress: (() => void) | undefined;
-    if (iValue === value) className += ` ${theme.selected}`;
-    else if (onChange) {
-      onPress = () => {
-        onChange(iValue);
-      };
-    }
-
-    optionNodes.push(
-      onPress
-        ? (
-          <div
-            className={className}
-            key={iValue}
-            onClick={onPress}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') onPress();
-            }}
-            role="button"
-            tabIndex={0}
-          >
-            {iName}
-          </div>
-        )
-        : <div className={className} key={iValue}>{iName}</div>,
-    );
-  }
-
-  return (
-    <div className={theme.container}>
-      {label ? <div className={theme.label}>{label}</div> : null}
-
-      <div className={theme.options}>
-        {optionNodes}
-      </div>
-    </div>
-  );
-};
-
-export default themed(BaseSwitch, 'Switch', defaultTheme);

package/src/shared/components/selectors/Switch/theme.scss

@@ -1,39 +0,0 @@
-*,
-.context,
-.ad.hoc {
-  &.container {
-    align-items: center;
-    display: flex;
-    gap: 0.6em;
-  }
-
-  &.option {
-    border: 1px solid transparent;
-    border-radius: 0.3em;
-    cursor: pointer;
-    outline: none;
-    padding: 0 0.9em;
-
-    &:focus {
-      border-color: blue;
-      box-shadow: 0 0 3px 1px lightblue;
-    }
-  }
-
-  &.selected {
-    border: 1px solid gray;
-    background: white;
-    cursor: default;
-  }
-
-  &.options {
-    align-items: center;
-    background: whitesmoke;
-    border: 1px solid gray;
-    border-radius: 0.3em;
-    display: flex;
-    gap: 0.3em;
-    padding: 0.3em;
-    user-select: none;
-  }
-}

package/src/shared/components/selectors/common.ts

@@ -1,57 +0,0 @@
-// The stuff common between different dropdown implementations.
-
-import type { Theme } from '@dr.pogodin/react-themes';
-
-type ThemeKeyT = 'active'
-  | 'arrow'
-  | 'container'
-  | 'dropdown'
-  | 'hiddenOption'
-  | 'label'
-  | 'option'
-  | 'select'
-
-  // TODO: This is currently only valid for (native) <Dropdown>,
-  // other kinds of selectors should be evaluated, and aligned with this
-  // feature, if appropriate.
-  | 'invalid'
-
-  // TODO: This is only valid for <CustomDropdown>, thus we need to re-factor it
-  // into a separate theme spec for that component.
-  | 'upward';
-
-export type ValueT = number | string;
-
-export type OptionT<NameT> = {
-  name?: NameT | null;
-  value: ValueT;
-};
-
-export type OptionsT<NameT> = Readonly<Array<OptionT<NameT> | ValueT>>;
-
-export type PropsT<
-  NameT,
-  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,
-> = {
-  filter?: (item: OptionT<NameT> | ValueT) => boolean;
-  label?: React.ReactNode;
-  onChange?: OnChangeT;
-  options: Readonly<OptionsT<NameT>>;
-  testId?: string;
-  theme: Theme<ThemeKeyT>;
-  value?: ValueT;
-};
-
-function isValue<T>(x: OptionT<T> | ValueT): x is ValueT {
-  const type = typeof x;
-  return type === 'number' || type === 'string';
-}
-
-/** Returns option value and name as a tuple. */
-export function optionValueName<NameT>(
-  option: OptionT<NameT> | ValueT,
-): [ValueT, NameT | ValueT] {
-  return isValue(option)
-    ? [option, option]
-    : [option.value, option.name ?? option.value];
-}

package/src/shared/components/selectors/index.ts

@@ -1,8 +0,0 @@
-export { default as CustomDropdown } from './CustomDropdown';
-export { default as Dropdown } from './NativeDropdown';
-export { default as Switch } from './Switch';
-
-export {
-  type OptionT,
-  type OptionsT,
-} from './common';

package/src/shared/utils/config.ts

@@ -1,59 +0,0 @@
-/* global document */
-
-import { parse } from 'cookie';
-
-import clientGetInj from '../../client/getInj';
-
-import { IS_CLIENT_SIDE } from './isomorphy/environment-check';
-import { requireWeak } from './webpack';
-
-type ConfigT = Record<string, unknown>;
-
-let config: ConfigT | Promise<ConfigT> | undefined;
-
-/**
- * Injects CSRF token into config (on client-side only).
- *
- * BEWARE: It mutates the argument, and also returns it as the result,
- * for chaining.
- */
-function injectCsrfToken(cfg: ConfigT): ConfigT {
-  // The safeguard for "document" is necessary because in non-Node environments,
-  // like React Native, IS_CLIENT_SIDE is "true", however "document" and a bunch
-  // of other browser-world features are not available.
-  if (IS_CLIENT_SIDE && typeof document !== 'undefined') {
-    // eslint-disable-next-line no-param-reassign
-    cfg.CSRF = parse(document.cookie).csrfToken;
-  }
-
-  return cfg;
-}
-
-export function getConfig(sync: true): ConfigT;
-
-export function getConfig(sync?: boolean): ConfigT | Promise<ConfigT>;
-
-export function getConfig(sync?: boolean): ConfigT | Promise<ConfigT> {
-  if (!config) {
-    if (IS_CLIENT_SIDE) {
-      const inj = clientGetInj();
-      config = inj instanceof Promise
-        ? inj.then((injection) => {
-          const res = injectCsrfToken(injection.CONFIG ?? {});
-          config = res;
-          return res;
-        })
-        : injectCsrfToken(inj.CONFIG ?? {});
-    } else {
-      const weak = requireWeak<ConfigT>('config');
-      if (!weak) throw Error('Internal error');
-      config = weak;
-    }
-  }
-
-  if (sync && (config instanceof Promise)) {
-    throw Error('The config is not available yet');
-  }
-
-  return config;
-}

package/src/shared/utils/globalState.ts

@@ -1,44 +0,0 @@
-import type { Request } from 'express';
-
-import { type SsrContext, withGlobalStateType } from '@dr.pogodin/react-global-state';
-
-/** Mapping "chunkName" > array of asset paths. */
-export type ChunkGroupsT = Record<string, string[]>;
-
-// The type of data object injected by server into generated markup.
-export type InjT = {
-  CHUNK_GROUPS?: ChunkGroupsT;
-  CONFIG?: Record<string, unknown>;
-  ISTATE?: unknown;
-};
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-  interface Window {
-    REACT_UTILS_INJECTION?: InjT;
-  }
-}
-
-// TODO: Not 100% sure now, whether it indeed can be replaced by type,
-// or do we really need it to be an interface. Keeping the interface for now.
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-export interface SsrContextT<StateT> extends SsrContext<StateT> {
-  chunkGroups: ChunkGroupsT;
-  chunks: string[];
-
-  /** If set at the end of SSR, the rendered will trigger
-   *  server-side redirect to this URL (and use the status
-   *  code). */
-  redirectTo?: string;
-
-  req: Request;
-  status: number;
-}
-
-const {
-  getSsrContext,
-} = withGlobalStateType<unknown, SsrContextT<unknown>>();
-
-export {
-  getSsrContext,
-};

package/src/shared/utils/index.ts

@@ -1,45 +0,0 @@
-import themedImpl, {
-  COMPOSE,
-  PRIORITY,
-  type Theme,
-  ThemeProvider,
-} from '@dr.pogodin/react-themes';
-
-import { getConfig } from './config';
-import * as isomorphy from './isomorphy';
-import time from './time';
-import * as webpack from './webpack';
-
-export {
-  assertEmptyObject,
-  type Listener,
-  type ObjectKey,
-  Barrier,
-  Cached,
-  Emitter,
-  Semaphore,
-  withRetries,
-} from '@dr.pogodin/js-utils';
-
-export { getSsrContext } from './globalState';
-export { default as splitComponent } from './splitComponent';
-
-type ThemedT = typeof themedImpl & {
-  COMPOSE: typeof COMPOSE;
-  PRIORITY: typeof PRIORITY;
-};
-
-const themed: ThemedT = themedImpl as ThemedT;
-
-themed.COMPOSE = COMPOSE;
-themed.PRIORITY = PRIORITY;
-
-export {
-  type Theme,
-  getConfig,
-  isomorphy,
-  themed,
-  ThemeProvider,
-  time,
-  webpack,
-};

package/src/shared/utils/isomorphy/buildInfo.ts

@@ -1,50 +0,0 @@
-// Encapsulates access to "Build Info" data.
-
-// BEWARE: This should match the type of build info object generated by
-// Webpack build (see "/config/webpack/app-base.js"), and currently this
-// match is not checked automatically.
-export type BuildInfoT = {
-  key: string;
-  publicPath: string;
-  timestamp: string;
-  useServiceWorker: boolean;
-};
-
-// Depending on the build mode & environment, BUILD_INFO is either a global
-// variable defined at the app launch, or it is replaced by the actual value
-// by the Webpack build.
-declare const BUILD_INFO: BuildInfoT | undefined;
-
-let buildInfo: BuildInfoT | undefined;
-
-// On the client side "BUILD_INFO" should be injected by Webpack. Note, however,
-// that in test environment we may need situations were environment is mocked as
-// client-side, although no proper Webpack compilation is executed, thus no info
-// injected; because of this we don't do a hard environment check here.
-if (typeof BUILD_INFO !== 'undefined') buildInfo = BUILD_INFO;
-
-/**
- * In scenarious where "BUILD_INFO" is not injected by Webpack (server-side,
- * tests, etc.) we expect the host codebase to explicitly set it before it is
- * ever requested. As a precaution, this function throws if build info has been
- * set already, unless `force` flag is explicitly set.
- * @param info
- * @param force
- */
-export function setBuildInfo(info?: BuildInfoT, force = false): void {
-  if (buildInfo !== undefined && !force) {
-    throw Error('"Build Info" is already initialized');
-  }
-  buildInfo = info;
-}
-
-/**
- * Returns "Build Info" object; throws if it has not been initialized yet.
- * @returns
- */
-export function getBuildInfo(): BuildInfoT {
-  if (buildInfo === undefined) {
-    throw Error('"Build Info" has not been initialized yet');
-  }
-  return buildInfo;
-}

package/src/shared/utils/isomorphy/environment-check.ts

@@ -1,18 +0,0 @@
-// Checks for client- vs. server-side environment detection.
-
-/**
- * `true` within client-side environment (browser), `false` at server-side.
- */
-export const IS_CLIENT_SIDE: boolean = typeof process !== 'object'
-  // NOTE: Because in this case we assume the host environment might be partially
-  // polyfilled to emulate some Node interfaces, thus it might have global `process`
-  // object, but without `versions` sub-object inside it.
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  || !process.versions?.node
-  || !!global.REACT_UTILS_FORCE_CLIENT_SIDE
-  || typeof REACT_UTILS_WEBPACK_BUNDLE !== 'undefined';
-
-/**
- * `true` within the server-side environment (node), `false` at client-side.
- */
-export const IS_SERVER_SIDE: boolean = !IS_CLIENT_SIDE;

package/src/shared/utils/isomorphy/index.ts

@@ -1,36 +0,0 @@
-import { getBuildInfo } from './buildInfo';
-import { IS_CLIENT_SIDE, IS_SERVER_SIDE } from './environment-check';
-
-/**
- * @ignore
- * @return {string} Code mode: "development" or "production".
- */
-function getMode() {
-  return process.env.NODE_ENV;
-}
-
-/**
- * Returns `true` if development version of the code is running;
- * `false` otherwise.
- */
-export function isDevBuild(): boolean {
-  return getMode() === 'development';
-}
-
-/**
- * Returns `true` if production build of the code is running;
- * `false` otherwise.
- */
-export function isProdBuild(): boolean {
-  return getMode() === 'production';
-}
-
-/**
- * Returns build timestamp of the front-end JS bundle.
- * @return ISO date/time string.
- */
-export function buildTimestamp(): string {
-  return getBuildInfo().timestamp;
-}
-
-export { IS_CLIENT_SIDE, IS_SERVER_SIDE, getBuildInfo };