@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.1

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -1,92 +0,0 @@
-/*
- * 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,
-  createRef,
-  ReactNode
-} from "react";
-import { Icon, Icons } from "../../Icon/Icon";
-import { KeyValuePair } from "../../interfaces";
-import { FormSelector } from "../form.interfaces";
-import { FormHelperText, Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
-import classes from "./FormSelectorWrapper.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"div">, FormSelector {
-  children?: ReactNode;
-  nestedChildren?: ReactNode;
-  containerProps?: ComponentPropsWithRef<"div"> & KeyValuePair;
-  helperProps?: FormHelperTextProps;
-  disabled?: boolean;
-  errorId?: string;
-  identifier?: string;
-}
-
-const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    children,
-    className,
-    nestedChildren,
-    containerProps,
-    helperProps,
-    error,
-    disabled,
-    helperText,
-    errorMessage,
-    parentErrorId,
-    errorId,
-    identifier,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const helperRef = helperProps?.ref || createRef();
-
-  return (
-    <div
-      {...rest}
-      ref={ref}
-      className={`${error ? classes["error"] : ""} ${disabled ? classes["disabled"] : ""} ${
-        className ?? ""
-      }`}
-    >
-      <div {...containerProps}>{children}</div>
-      {(helperText || (helperProps && helperProps.children)) &&
-        (!error || parentErrorId || !errorMessage) && (
-          <FormHelperText
-            {...helperProps}
-            ref={helperRef}
-            id={`${identifier}`}
-            className={`${classes["helper-text"]} ${helperProps?.className ?? ""} ${
-              error ? classes["error"] : ""
-            }`}
-          >
-            {(helperProps && helperProps.children) || helperText}
-          </FormHelperText>
-        )}
-      {errorMessage && !parentErrorId && error && (
-        <span className={classes["error-message"]}>
-          <Icon className={classes["error-icon"]} icon={Icons.Error} />
-          <span id={errorId}>{errorMessage}</span>
-        </span>
-      )}
-      {nestedChildren}
-    </div>
-  );
-};
-
-export const FormSelectorWrapper = React.forwardRef(FormSelectorWrapperComponent);

package/src/Form/Input/Input.module.scss

@@ -1,150 +0,0 @@
-/*!
- * 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 "src/mixins.module";
-@use "src/variables";
-
-.input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 4rem;
-  border: 0;
-  border-radius: var(--input-border-radius);
-  background-color: var(--input-background-color);
-  padding: 0 variables.$form-element-horizontal-padding-mobile;
-  @include mixins.transition(all, 0.2s, ease-in-out);
-
-  // General autofill styles
-  input:-webkit-autofill,
-  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus,
-  input:-webkit-autofill:active {
-    transition: background-color 5000s ease-in-out 0s !important;
-
-    ~ .outline {
-      &:after {
-        content: "";
-        position: absolute;
-        display: block;
-        width: 100%;
-        height: 100%;
-        border-radius: var(--input-border-radius);
-      }
-    }
-
-    // Chrome specific color
-    @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
-      ~ .outline {
-        &:after {
-          background-color: rgb(232, 240, 254);
-        }
-      }
-    }
-
-    // Safari specific color
-    @media not all and (min-resolution: 0.001dpcm) {
-      ~ .outline {
-        &:after {
-          background-color: rgb(250, 255, 189);
-        }
-      }
-    }
-  }
-
-  @include mixins.outlineStates;
-
-  [data-icon-status="success"],
-  [data-icon-status="error"] {
-    height: 100%;
-    width: 1.25rem;
-    box-sizing: border-box;
-    padding-top: calc(1rem - (1.25rem - 1rem));
-    font-size: 1.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-
-    &:before {
-      height: 1.25rem;
-      width: 1.25rem;
-    }
-  }
-
-  [data-icon-status="success"] {
-    color: var(--success);
-  }
-
-  [data-icon-status="error"] {
-    color: var(--error);
-  }
-}
-
-.input {
-  padding: 0;
-  height: 4rem;
-  color: var(--greyed-out);
-  font-size: var(--font-size);
-  font-family: var(--font-family);
-  box-sizing: border-box;
-  border: 0;
-  border-radius: var(--input-border-radius);
-  @include mixins.transition(all, 0.2s, ease-in-out);
-  background-color: transparent;
-  z-index: 1;
-
-  &:not(.shrink-width-for-date-icon) {
-    width: 100%;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &.shrink-width-for-date-icon {
-    width: auto;
-  }
-
-  @include mixins.browserOutlineDisabled;
-}
-
-@include mixins.outline;
-
-.error input {
-  color: var(--error);
-  padding-right: 1.25rem;
-
-  &.remove-extra-indent {
-    padding-right: 0;
-  }
-}
-.success input {
-  padding-right: 1.25rem;
-}
-
-.input-wrapper [data-prefix],
-.input-wrapper [data-suffix] {
-  @include mixins.transition(all, 0.2s, ease-in-out);
-  display: block;
-  z-index: 1;
-}
-
-@media only screen and (min-width: 30em) {
-  .input-wrapper {
-    padding: 0 variables.$form-element-horizontal-padding-desktop;
-  }
-}

package/src/Form/Input/Input.test.tsx

@@ -1,247 +0,0 @@
-/*
- * 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, { useEffect, useRef, useState, Fragment } from "react";
-import { Input, Props, Type } from "./Input";
-import { fireEvent, render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Label } from "../Label/Label";
-
-const defaultParams: Props = {
-  name: "input",
-  type: "text"
-};
-
-const createInput = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Input {...parameters} data-testid="input" />);
-  const input = queries.getByTestId("input");
-
-  return {
-    ...queries,
-    input
-  };
-};
-
-const CreateInputComponent = ({
-  onValueChange,
-  type
-}: {
-  onValueChange: (value: string) => void;
-  type: Type;
-}) => {
-  const [inputValue, setInputValue] = useState("");
-
-  useEffect(() => {
-    if (inputValue !== "") {
-      onValueChange(inputValue);
-    }
-  }, [inputValue]);
-
-  return (
-    <Fragment>
-      <Label htmlFor="sample-input">Test</Label>
-      <Input
-        name="sample_input"
-        type={type}
-        id="sample-input"
-        value={inputValue}
-        onChange={e => setInputValue(e.target.value)}
-      />
-    </Fragment>
-  );
-};
-
-describe("Input should render", () => {
-  it("renders without crashing and has a name and type", () => {
-    const { input } = createInput();
-    expect(input).toBeTruthy();
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref);
-        }
-      }, [ref]);
-
-      return <Input {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("Should have the appropriate attributes", () => {
-  it("is disabled and has a class", () => {
-    const { input } = createInput(defaultParams => ({
-      ...defaultParams,
-      disabled: true,
-      className: "classname"
-    }));
-
-    expect(input).toHaveAttribute("disabled");
-    expect(input).toHaveClass("classname");
-  });
-
-  it("should render an input with spellcheck enabled", () => {
-    const { input } = createInput(defaultParams => ({ ...defaultParams, spellCheck: true }));
-
-    expect(input).toHaveAttribute("spellcheck", "true");
-  });
-
-  it("should render an input with spellcheck disabled by default", () => {
-    const { input } = createInput(defaultParams => ({ ...defaultParams }));
-
-    expect(input).toHaveAttribute("spellcheck", "false");
-  });
-});
-
-describe("Should render all different types of inputs", () => {
-  it.each([
-    ["text", "testing", "testing"],
-    ["email", "testing@testing.com", "testing@testing.com"],
-    ["tel", "06123456789", "06123456789"],
-    ["number", "1234567890", "1234567890"],
-    ["search", "example", "example"],
-    ["time", "1234", "12:34"],
-    ["url", "https://www.onewelcome.com", "https://www.onewelcome.com"]
-  ])(
-    "renders a %p input with %p as a value",
-    async (type: string, value: string, result: string) => {
-      let changedValue = "";
-
-      const { findByLabelText } = render(
-        <CreateInputComponent type={type as Type} onValueChange={value => (changedValue = value)} />
-      );
-
-      const input = await findByLabelText(/Test/);
-
-      input.focus();
-
-      userEvent.keyboard(value);
-
-      expect(changedValue).toBe(result);
-    }
-  );
-
-  it("should render a password input", () => {
-    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "password" }));
-
-    expect(input).toHaveAttribute("type", "password");
-  });
-
-  it("should render a datetime input", async () => {
-    let changedValue = "";
-
-    const { findByLabelText } = render(
-      <CreateInputComponent type="datetime-local" onValueChange={value => (changedValue = value)} />
-    );
-
-    const input = await findByLabelText(/Test/);
-
-    const testValue = "2019-03-29T12:34";
-    fireEvent.change(input, { target: { value: testValue } });
-
-    expect(changedValue).toBe(testValue);
-  });
-
-  it("should be hidden", () => {
-    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "hidden" }));
-
-    expect(input.parentElement).toHaveClass("hidden");
-    expect(input).toHaveAttribute("type", "hidden");
-  });
-});
-
-describe("It should execute the listeners", () => {
-  it("fires event handlers", () => {
-    const onChangeHandler = jest.fn();
-    const onKeyUpHandler = jest.fn();
-    const onKeyDownHandler = jest.fn();
-
-    const { input } = createInput(defaultParams => ({
-      ...defaultParams,
-      type: "text",
-      onKeyUp: onKeyUpHandler,
-      onKeyDown: onKeyDownHandler,
-      onChange: onChangeHandler
-    }));
-
-    input.focus();
-
-    expect(input).toHaveFocus();
-
-    userEvent.keyboard("test");
-
-    expect(onKeyUpHandler).toHaveBeenCalled();
-    expect(onKeyDownHandler).toHaveBeenCalled();
-    expect(onChangeHandler).toHaveBeenCalled();
-  });
-});
-
-describe("It should render prefix and suffix ", () => {
-  it("renders prefix and suffix", () => {
-    const prefix = "http://";
-    const suffix = ".com";
-    const { getByText } = createInput(defaultParams => ({
-      ...defaultParams,
-      prefix,
-      suffix
-    }));
-
-    expect(getByText(prefix)).toBeDefined();
-    expect(getByText(suffix)).toBeDefined();
-  });
-
-  it("error icon should be visible with suffix", () => {
-    const suffix = ".com";
-    const { input, getByText } = createInput(defaultParams => ({
-      ...defaultParams,
-      error: true,
-      suffix
-    }));
-
-    expect(input.querySelector("icon-warning")).toBeDefined();
-    expect(getByText(suffix)).toBeDefined();
-  });
-
-  it("success icon should be visible", () => {
-    const { input } = createInput(defaultParams => ({
-      ...defaultParams,
-      success: true
-    }));
-    const icon = input.querySelector(".icon-checkmark-circle-breakout");
-    expect(input.querySelector(".success")).toBeDefined();
-    expect(icon).toBeDefined();
-  });
-});

package/src/Form/Input/Input.tsx

@@ -1,142 +0,0 @@
-/*
- * 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
-} from "react";
-import classes from "./Input.module.scss";
-import readyclasses from "../../readyclasses.module.scss";
-import { FormElement } from "../form.interfaces";
-import { useDetermineStatusIcon } from "../../hooks/useDetermineStatusIcon";
-
-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 interface Props extends ComponentPropsWithRef<"input">, FormElement {
-  wrapperProps?: ComponentPropsWithRef<"div">;
-  labeledBy?: string;
-  type: Type;
-  suffix?: string;
-  prefix?: string;
-}
-
-const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
-  {
-    error = false,
-    success = false,
-    className,
-    name,
-    style,
-    wrapperProps,
-    type,
-    labeledBy,
-    prefix,
-    suffix,
-    disabled,
-    onFocus,
-    onBlur,
-    ...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"]];
-
-  (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 });
-
-  return (
-    <div
-      ref={inputWrapperRef}
-      {...wrapperProps}
-      style={{ ...style }}
-      className={`${classes["input-wrapper"]} ${wrapperClasses.join(" ")}`}
-    >
-      {prefix && (
-        <div data-prefix className={classes["prefix"]}>
-          <span>{prefix}</span>
-        </div>
-      )}
-      <input
-        {...rest}
-        ref={ref}
-        onFocus={event => {
-          setFocus(true);
-          onFocus && onFocus(event);
-        }}
-        onBlur={event => {
-          setFocus(false);
-          onBlur && onBlur(event);
-        }}
-        aria-labelledby={labeledBy}
-        type={type}
-        name={name}
-        disabled={disabled}
-        className={inputClassNames.join(" ")}
-        spellCheck={rest.spellCheck || false}
-      />
-      {icon}
-      {suffix && (
-        <div ref={suffixRef} data-suffix className={classes["suffix"]}>
-          <span>{suffix}</span>
-        </div>
-      )}
-      <span className={outlineClasses.join(" ")}></span>
-    </div>
-  );
-};
-
-export const Input = React.forwardRef(InputComponent);

package/src/Form/Label/Label.tsx

@@ -1,40 +0,0 @@
-/*
- * 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);