@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

package/src/components/Form/Input/Input.tsx

@@ -0,0 +1,161 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  Ref,
+  useEffect,
+  useRef,
+  useState,
+  ReactNode
+} from "react";
+import classes from "./Input.module.scss";
+import readyclasses from "../../../readyclasses.module.scss";
+import { FormElement } from "../form.interfaces";
+import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
+import { MergeElementProps } from "../../../interfaces";
+import { withReadOnly } from "../../withReadOnly";
+
+export const dateTypes = ["date", "time", "datetime-local"] as const;
+
+export type Type =
+  | "text"
+  | "email"
+  | "file"
+  | "number"
+  | "password"
+  | "search"
+  | "tel"
+  | "url"
+  | "hidden"
+  | (typeof dateTypes)[number];
+
+export type Props = MergeElementProps<
+  "input",
+  FormElement & {
+    wrapperProps?: ComponentPropsWithRef<"div">;
+    labeledBy?: string;
+    type: Type;
+    suffix?: ReactNode;
+    prefix?: ReactNode;
+    readOnlyView?: boolean;
+  }
+>;
+
+const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
+  {
+    error = false,
+    success = false,
+    className,
+    name,
+    style,
+    wrapperProps,
+    type,
+    labeledBy,
+    prefix,
+    suffix,
+    disabled,
+    onFocus,
+    onBlur,
+    readOnlyView,
+    ...rest
+  }: Props,
+  ref: Ref<HTMLInputElement>
+) => {
+  const [focus, setFocus] = useState(false);
+  const inputWrapperRef = useRef<HTMLDivElement>(null);
+  const suffixRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (name === undefined) {
+      throw new Error("Please give your <Input /> component a 'name' attribute");
+    }
+  }, []);
+
+  const inputClassNames = [classes["input"]];
+
+  const renderElement = (el: ReactNode) => {
+    return typeof el === "string" ? <span>{el}</span> : el;
+  };
+
+  (dateTypes as ReadonlyArray<string>).includes(type) &&
+    inputClassNames.push(classes["shrink-width-for-date-icon"]);
+  className && inputClassNames.push(className);
+
+  const wrapperClasses = [classes["input-wrapper"]];
+  const outlineClasses = [classes["outline"]];
+
+  wrapperProps?.className && wrapperClasses.push(wrapperProps.className);
+  type === "hidden" && wrapperClasses.push(readyclasses["hidden"]);
+  prefix && wrapperClasses.push(classes["prefix"]);
+  suffix && wrapperClasses.push(classes["suffix"]);
+  disabled && wrapperClasses.push(classes["disabled"]) && outlineClasses.push(classes["disabled"]);
+  error && wrapperClasses.push(classes["error"]) && outlineClasses.push(classes["error"]);
+  focus && wrapperClasses.push(classes["focus"]) && outlineClasses.push(classes["focus"]);
+  success && wrapperClasses.push(classes["success"]);
+
+  const icon = useDetermineStatusIcon({ success, error });
+  const readOnlyMode = rest["data-readonlyview"] as boolean;
+
+  return (
+    <div
+      ref={inputWrapperRef}
+      {...wrapperProps}
+      style={{ ...style }}
+      data-readonlyview={readOnlyMode}
+      className={`${classes["input-wrapper"]} ${wrapperClasses.join(" ")}`}
+      tabIndex={readOnlyMode ? 0 : -1}
+    >
+      {prefix && (
+        <div data-prefix className={classes["prefix"]}>
+          {renderElement(prefix)}
+        </div>
+      )}
+      <input
+        {...rest}
+        ref={ref}
+        aria-readonly={readOnlyMode}
+        readOnly={readOnlyMode}
+        onFocus={event => {
+          setFocus(true);
+          onFocus?.(event);
+        }}
+        onBlur={event => {
+          setFocus(false);
+          onBlur?.(event);
+        }}
+        aria-labelledby={labeledBy}
+        type={type}
+        name={name}
+        disabled={disabled}
+        className={inputClassNames.join(" ")}
+        spellCheck={rest.spellCheck ?? false}
+        tabIndex={readOnlyMode ? -1 : 0}
+      />
+      {icon}
+      {suffix && (
+        <div ref={suffixRef} data-suffix className={classes["suffix"]}>
+          {renderElement(suffix)}
+        </div>
+      )}
+
+      <span className={outlineClasses.join(" ")}></span>
+    </div>
+  );
+};
+
+export const Input = withReadOnly(React.forwardRef(InputComponent));

package/src/components/Form/Label/Label.module.scss

@@ -0,0 +1,21 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.label {
+  cursor: text;
+  color: var(--greyed-out);
+  font-size: var(--font-size);
+}

package/src/components/Form/Label/Label.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from "react";
+import classes from "./Label.module.scss";
+import readyclasses from "../../../readyclasses.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"label"> {
+  children?: ReactNode;
+}
+
+const LabelComponent: ForwardRefRenderFunction<HTMLLabelElement, Props> = (
+  { children, className, hidden = false, ...rest }: Props,
+  ref
+) => {
+  return (
+    <label
+      {...rest}
+      ref={ref}
+      className={`${hidden ? readyclasses["sr-only"] : ""} ${classes["label"]} ${className ?? ""}`}
+    >
+      {children}
+    </label>
+  );
+};
+
+export const Label = React.forwardRef(LabelComponent);

package/src/components/Form/Radio/Radio.module.scss

@@ -0,0 +1,196 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../../functions" as *;
+
+.radio-wrapper {
+  position: relative;
+
+  + .radio-wrapper {
+    margin-top: 0.75rem;
+  }
+}
+
+.error {
+  color: var(--error);
+}
+
+.error-message {
+  margin-top: 0.25rem;
+  margin-left: relativeToBaseFontSize(1.75);
+  font-size: var(--font-size-sub);
+}
+
+.helper-text {
+  margin-top: 0.25rem;
+  margin-left: 1.75rem;
+}
+
+.error-icon {
+  margin-right: 0.5rem;
+  font-size: var(--font-size-big);
+}
+
+.radio-container {
+  display: flex;
+
+  label {
+    display: inline-block;
+    margin-left: relativeToBaseFontSize(0.5);
+    font-size: var(--font-size-form-label);
+    font-family: var(--font-family);
+    margin-top: 0.15rem;
+
+    &.no-margin-top {
+      margin-top: 0;
+    }
+
+    .disabled & {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.native-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  margin: 0;
+  width: var(--font-size-big);
+  height: var(--font-size-big);
+  z-index: 2;
+
+  & + span[data-icon="true"]:before {
+    display: block;
+    width: var(--font-size-big);
+    height: var(--font-size-big);
+  }
+
+  &:checked + * {
+    color: var(--radio-checked-color);
+  }
+
+  &:checked + *.disabled {
+    color: var(--disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &:focus-visible {
+    + * {
+      border-radius: 100%;
+      outline: 2px solid var(--color-focus);
+      outline-offset: 2px;
+    }
+  }
+
+  &.error + * {
+    border-radius: 100%;
+  }
+
+  &.error:hover + .radio::before {
+    outline-color: var(--radio-hover-background-color);
+  }
+
+  &.error:active + .radio::before {
+    outline-color: var(--radio-pressed-background-color);
+  }
+
+  &:hover + .input.circle:not(.disabled) {
+    background-color: var(--radio-hover-background-color);
+  }
+
+  &:active + .input.circle:not(.disabled) {
+    background-color: var(--radio-pressed-background-color);
+  }
+
+  &:hover + .input.radio:not(.disabled) {
+    background-color: var(--radio-hover-background-color);
+    color: var(--radio-hover-color);
+  }
+
+  &:active + .input.radio:not(.disabled) {
+    color: var(--radio-pressed-color);
+    background-color: var(--radio-pressed-background-color);
+  }
+}
+
+.input {
+  font-size: var(--font-size-big);
+  width: var(--font-size-big);
+  height: var(--font-size-big);
+  z-index: 1;
+  border-radius: 100%;
+  color: var(--color-blue-grey500);
+
+  &:active {
+    border-radius: 100%;
+  }
+
+  .disabled & {
+    color: var(--disabled);
+  }
+}
+
+.disabled {
+  color: var(--disabled);
+  pointer-events: none;
+}
+
+[data-readonlyview="true"] .radio-wrapper {
+  color: var(--read-only-text-color);
+
+  & span.input {
+    color: var(--read-only-text-color);
+    cursor: not-allowed;
+
+    &:before {
+      outline: 1px solid var(--read-only-border-color);
+      outline-offset: -1px;
+      border-radius: 50%;
+    }
+  }
+
+  label {
+    user-select: text;
+  }
+}
+
+.radio-container input[type="radio"] {
+  &[data-readonlyview="true"] {
+    & ~ span.input {
+      color: var(--read-only-text-color);
+      cursor: not-allowed;
+
+      &:before {
+        outline: 1px solid var(--read-only-border-color);
+        outline-offset: -1px;
+        border-radius: 50%;
+      }
+    }
+
+    & ~ label {
+      user-select: text;
+      pointer-events: none;
+    }
+
+    & :focus-visible {
+      outline: 2px solid var(--color-focus);
+      outline-offset: 2px;
+    }
+  }
+}

package/src/components/Form/Radio/Radio.tsx

@@ -0,0 +1,142 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import { Props as HelperProps } from "../FormHelperText/FormHelperText";
+import classes from "./Radio.module.scss";
+import { useFormSelector } from "../../../hooks/useFormSelector";
+import { FormSelector } from "../form.interfaces";
+import {
+  FormSelectorWrapper,
+  Props as FormSelectorWrapperProps
+} from "../FormSelectorWrapper/FormSelectorWrapper";
+import { withReadOnly } from "../../withReadOnly";
+
+export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
+  children: string | React.ReactNode;
+  value: string;
+  formSelectorWrapperProps?: FormSelectorWrapperProps;
+  helperProps?: HelperProps;
+}
+
+const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
+  {
+    children,
+    disabled,
+    className,
+    value,
+    name,
+    helperText,
+    parentErrorId,
+    parentHelperId,
+    error,
+    errorMessage,
+    errorMessageProps,
+    checked = false,
+    formSelectorWrapperProps,
+    helperProps,
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, identifier, describedBy } = useFormSelector({
+    name,
+    helperText,
+    parentErrorId,
+    errorMessage,
+    error,
+    parentHelperId
+  });
+
+  const onChangeHandler = (
+    event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent | React.KeyboardEvent
+  ) => {
+    if (disabled) {
+      return;
+    }
+    /** We have to clone the native event we got here and change the "target" property to the value. Otherwise, this regular event has "on" as it's event.target.value, which is useless. */
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    const nativeEvent: any = event.nativeEvent || event;
+    const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+
+    Object.defineProperty(clonedEvent, "target", {
+      writable: true,
+      value: { value: value }
+    });
+
+    onChange?.(clonedEvent);
+  };
+
+  const customLabel = typeof children !== "string";
+
+  const nativeInputClasses = [classes["native-input"]];
+  const checkedRadioClasses = [classes["input"], classes["radio"]];
+  const uncheckedRadioClasses = [classes["input"], classes["circle"]];
+  error && nativeInputClasses.push(classes["error"]);
+  disabled &&
+    checkedRadioClasses.push(classes["disabled"]) &&
+    uncheckedRadioClasses.push(classes["disabled"]);
+  return (
+    <FormSelectorWrapper
+      {...formSelectorWrapperProps}
+      className={`${classes["radio-wrapper"]} ${className ?? ""}`}
+      containerProps={{ className: classes["radio-container"] }}
+      helperText={helperText}
+      helperProps={helperProps}
+      parentErrorId={parentErrorId}
+      errorId={errorId}
+      errorMessage={errorMessage}
+      errorMessageProps={{
+        ...errorMessageProps,
+        className: `${errorMessageProps?.className} ${classes["error-message"]}`
+      }}
+      error={error}
+      disabled={disabled}
+      identifier={identifier}
+    >
+      <input
+        {...rest}
+        ref={ref}
+        disabled={disabled}
+        tabIndex={0}
+        className={nativeInputClasses.join(" ")}
+        onChange={onChangeHandler}
+        checked={checked}
+        aria-checked={checked}
+        aria-describedby={describedBy}
+        name={name}
+        value={value}
+        id={`${identifier}-radio`}
+        type="radio"
+      />
+
+      {checked ? <Icon className={checkedRadioClasses.join(" ")} icon={Icons.Radio} /> : <></>}
+      {!checked ? <Icon className={uncheckedRadioClasses.join(" ")} icon={Icons.Circle} /> : <></>}
+
+      <label
+        className={customLabel ? classes["no-margin-top"] : ""}
+        onClick={onChangeHandler}
+        htmlFor={`${identifier}-radio`}
+      >
+        {children}
+      </label>
+    </FormSelectorWrapper>
+  );
+};
+
+export const Radio = withReadOnly(React.forwardRef(RadioComponent));

package/src/components/Form/Select/MultiSelect/MultiOption.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, RefObject, createRef, useEffect } from "react";
+import { Props as SelectOptionProps, Option as SelectOption } from "../SingleSelect/Option";
+
+import classes from "./MultiSelect.module.scss";
+
+export interface Props extends SelectOptionProps {
+  fixed?: boolean;
+}
+
+const MultiOptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
+  { fixed: _fixed, hasFocus, className, ...rest }: Props,
+  ref
+) => {
+  const innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
+
+  const additionalClasses = [];
+  className && additionalClasses.push(className);
+  hasFocus && additionalClasses.push(classes["focus"]);
+
+  const scrollToSelectedElement = (element: HTMLLIElement) => {
+    const listbox = element.parentElement;
+    const listboxWrapper = element.parentElement?.parentElement;
+    const isListboxWrapperScrollable = !!listboxWrapper?.style.maxHeight;
+
+    if (isListboxWrapperScrollable) {
+      listboxWrapper?.scrollTo &&
+        listboxWrapper?.scrollTo(0, element.offsetTop - (listboxWrapper?.offsetHeight ?? 1) / 2);
+    }
+    listbox?.scrollTo && listbox?.scrollTo(0, element.offsetTop - (listbox?.offsetHeight ?? 1) / 2);
+  };
+
+  useEffect(() => {
+    if (innerOptionRef.current && hasFocus) {
+      scrollToSelectedElement(innerOptionRef.current);
+    }
+  }, [hasFocus, innerOptionRef]);
+
+  return (
+    <SelectOption
+      ref={innerOptionRef}
+      isSelected={hasFocus}
+      disableDefaultSelectedStyle
+      className={additionalClasses.join(" ")}
+      aria-disabled={false}
+      {...rest}
+    />
+  );
+};
+
+export const MultiOption = React.forwardRef(MultiOptionComponent);