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

package/src/Form/Checkbox/Checkbox.test.tsx

@@ -1,297 +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 } from "react";
-import { Checkbox, Props } from "./Checkbox";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Toggle } from "../Toggle/Toggle";
-
-const onChangeHandler = jest.fn();
-
-const defaultParams: Props = {
-  name: "Testing",
-  children: "checkbox content",
-  helperText: "example helper",
-  onChange: onChangeHandler
-};
-
-const createCheckbox = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Checkbox {...parameters} data-testid="checkbox" />);
-  const checkbox = queries.getByTestId("checkbox");
-
-  return {
-    ...queries,
-    checkbox
-  };
-};
-
-describe("Checkbox should render", () => {
-  it("renders without crashing", () => {
-    const { checkbox } = createCheckbox();
-    expect(checkbox).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 <Checkbox {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("Checkbox should have proper attributes", () => {
-  it("should be unchecked", () => {
-    const { checkbox } = createCheckbox();
-
-    expect(checkbox).toHaveAttribute("aria-checked", "false");
-  });
-
-  it("should be checked", () => {
-    const { checkbox } = createCheckbox(defaultParams => ({ ...defaultParams, checked: true }));
-
-    expect(checkbox).toHaveAttribute("aria-checked", "true");
-  });
-
-  it("should call the onChange function", () => {
-    const onChangeHandler = jest.fn();
-    const { checkbox } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      onChange: onChangeHandler
-    }));
-    userEvent.click(checkbox);
-    expect(onChangeHandler).toHaveBeenCalled();
-  });
-
-  it("should be disabled", () => {
-    const onChangeHandler = jest.fn();
-    const { checkbox } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      onChange: onChangeHandler,
-      disabled: true
-    }));
-
-    expect(checkbox).toBeDisabled();
-
-    userEvent.click(checkbox);
-
-    expect(onChangeHandler).not.toHaveBeenCalled();
-  });
-
-  it("nested checkbox should be disabled", () => {
-    const { getByTestId } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      indeterminate: false,
-      label: "test",
-      children: (
-        <Checkbox data-testid="nested-checkbox" name="test" disabled={true}>
-          test
-        </Checkbox>
-      )
-    }));
-
-    const nestedCheckbox = getByTestId("nested-checkbox");
-
-    expect(nestedCheckbox).toBeDisabled();
-  });
-
-  it("should have helpertext rendered", () => {
-    const { getByText } = createCheckbox();
-
-    const helperText = getByText("example helper");
-
-    expect(helperText).toBeTruthy();
-  });
-
-  it("should have the error state enabled", () => {
-    const { checkbox, container, getByTestId } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      error: true,
-      errorMessage: "This is an error",
-      formSelectorWrapperProps: { "data-testid": "checkbox-wrapper" }
-    }));
-
-    expect(checkbox).toHaveAttribute(
-      "aria-describedby",
-      container.querySelector(".error-message span:last-of-type")!.id
-    );
-
-    expect(checkbox).toHaveAttribute("aria-invalid", "true");
-    expect(getByTestId("checkbox-wrapper")).toHaveClass("error");
-  });
-
-  it("should have a correctly linked label element", () => {
-    const { checkbox, container } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      children: "Label"
-    }));
-
-    const id = checkbox.getAttribute("id");
-    const label = container.querySelector(`label[for=${id}]`);
-
-    expect(label).toBeTruthy();
-    expect(label).toHaveTextContent("Label");
-  });
-});
-
-describe("Checkbox should be interactive", () => {
-  it("should call onChange when clicked", () => {
-    const { checkbox } = createCheckbox();
-
-    expect(onChangeHandler).not.toBeCalled();
-    userEvent.click(checkbox);
-    expect(onChangeHandler).toBeCalledTimes(1);
-  });
-
-  it("should not call onChange when disabled", () => {
-    const { checkbox } = createCheckbox(defaultParams => ({ ...defaultParams, disabled: true }));
-
-    userEvent.click(checkbox);
-    expect(onChangeHandler).not.toBeCalled();
-  });
-});
-
-describe("toggle version", () => {
-  it("should turn into a toggle", () => {
-    const { container } = render(<Toggle name="toggle">Test</Toggle>);
-
-    expect(container.querySelector("[data-toggle]")).toBeInTheDocument();
-  });
-});
-
-describe("missing attributes gets us errors", () => {
-  it("throws an error for missing label prop", () => {
-    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
-    const err = console.error;
-    console.error = jest.fn();
-
-    let actual;
-
-    try {
-      // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox(defaultParams => ({
-        ...defaultParams,
-        name: "testing",
-        children: <Checkbox name="test">Test</Checkbox>
-      }));
-    } catch (e: any) {
-      actual = e.message;
-    }
-
-    const expected =
-      "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.";
-
-    expect(actual).toEqual(expected);
-
-    console.error = err;
-  });
-
-  it("throws an error for indeterminate prop", () => {
-    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
-    const err = console.error;
-    console.error = jest.fn();
-
-    let actual;
-
-    try {
-      // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox(defaultParams => ({
-        ...defaultParams,
-        label: "testing",
-        children: <Checkbox name="test">Test</Checkbox>
-      }));
-    } catch (e: any) {
-      actual = e.message;
-    }
-
-    const expected =
-      "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.";
-
-    expect(actual).toEqual(expected);
-
-    console.error = err;
-  });
-
-  it("throws an error for incorrect children prop", () => {
-    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
-    const err = console.error;
-    console.error = jest.fn();
-
-    let actual;
-
-    try {
-      // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox(defaultParams => ({
-        name: undefined
-      }));
-    } catch (e: any) {
-      actual = e.message;
-    }
-
-    const expected =
-      "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.";
-
-    expect(actual).toEqual(expected);
-
-    console.error = err;
-  });
-
-  it("throws an error for missing name prop", () => {
-    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
-    const err = console.error;
-    console.error = jest.fn();
-
-    let actual;
-
-    try {
-      // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox(defaultParams => ({
-        children: "test"
-      }));
-    } catch (e: any) {
-      actual = e.message;
-    }
-
-    const expected = "Please pass a 'name' prop to your <Checkbox> component.";
-
-    expect(actual).toEqual(expected);
-
-    console.error = err;
-  });
-});

package/src/Form/Checkbox/Checkbox.tsx

@@ -1,183 +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,
-  ReactElement,
-  ReactNode,
-  useEffect
-} from "react";
-import { Icon, Icons } from "../../Icon/Icon";
-import { Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
-import classes from "./Checkbox.module.scss";
-import { useFormSelector } from "../../hooks/useFormSelector";
-import {
-  FormSelectorWrapper,
-  Props as FormSelectorWrapperProps
-} from "../FormSelectorWrapper/FormSelectorWrapper";
-import { FormSelector } from "../form.interfaces";
-
-const isToggle = (children: ReactNode) => (children as ReactElement)?.props?.["data-toggle"];
-
-export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
-  children: ReactNode;
-  label?: string;
-  indeterminate?: boolean;
-  helperProps?: FormHelperTextProps;
-  formSelectorWrapperProps?: FormSelectorWrapperProps;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
-  {
-    children,
-    name,
-    helperText,
-    helperProps,
-    indeterminate,
-    parentErrorId,
-    errorMessage,
-    disabled,
-    label,
-    parentHelperId,
-    className,
-    error,
-    checked = false,
-    formSelectorWrapperProps,
-    onChange,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const { errorId, identifier, describedBy } = useFormSelector({
-    name,
-    helperText,
-    parentErrorId,
-    errorMessage,
-    error,
-    parentHelperId
-  });
-
-  useEffect(() => {
-    if (!name) {
-      throw new Error("Please pass a 'name' prop to your <Checkbox> component.");
-    }
-
-    if (typeof children === "object" && !isToggle(children) && indeterminate === undefined) {
-      throw new Error(
-        "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop."
-      );
-    }
-  }, []);
-
-  const determineLabel = () => {
-    if (label) {
-      return label;
-    } else if (children === undefined) {
-      throw new Error(
-        "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component."
-      );
-    }
-
-    if (
-      typeof children === "string" ||
-      (typeof children === "object" && (children as ReactElement).type === "span")
-    ) {
-      return children;
-    }
-
-    throw new Error(
-      "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox."
-    );
-  };
-
-  const renderNestedCheckboxes = () => (
-    <ul className={classes["checkbox-list"]}>
-      {React.Children.map(children as ReactElement[], child => {
-        return (
-          <li>
-            <Checkbox
-              {...child.props}
-              parentHelperId={parentHelperId}
-              parentErrorId={parentErrorId}
-              error={error}
-              disabled={child.props.disabled ? child.props.disabled : disabled}
-            >
-              {child.props.children}
-            </Checkbox>
-          </li>
-        );
-      })}
-    </ul>
-  );
-
-  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (disabled) {
-      return;
-    }
-    onChange && onChange(event);
-  };
-
-  const renderToggle = () => React.Children.toArray(children).filter(isToggle);
-
-  const iconClasses = [classes["input"], disabled ? classes["disabled"] : ""];
-
-  /** Default return value is the default checkbox */
-  return (
-    <FormSelectorWrapper
-      {...formSelectorWrapperProps}
-      className={`${classes["checkbox-wrapper"]} ${className ? className : ""}`}
-      containerProps={{ className: classes["checkbox-container"] }}
-      helperText={helperText}
-      helperProps={helperProps}
-      parentErrorId={parentErrorId}
-      errorId={errorId}
-      errorMessage={errorMessage}
-      error={error}
-      disabled={disabled}
-      identifier={identifier}
-      nestedChildren={
-        typeof children === "object" && !isToggle(children) && renderNestedCheckboxes()
-      }
-    >
-      <input
-        {...rest}
-        ref={ref}
-        disabled={disabled}
-        className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
-        checked={checked}
-        onChange={onChangeHandler}
-        aria-invalid={error as boolean}
-        aria-checked={indeterminate ? "mixed" : checked}
-        aria-describedby={describedBy}
-        id={`${identifier}-checkbox`}
-        name={name}
-        type="checkbox"
-      />
-      {renderToggle()}
-
-      {indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.MinusSquare} />}
-      {checked && !indeterminate && (
-        <Icon className={iconClasses.join(" ")} icon={Icons.CheckmarkSquare} />
-      )}
-      {!checked && !indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.Square} />}
-      <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
-    </FormSelectorWrapper>
-  );
-};
-
-export const Checkbox = React.forwardRef(CheckboxComponent);

package/src/Form/Fieldset/Fieldset.tsx

@@ -1,134 +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,
-  ReactElement
-} from "react";
-import readyclasses from "../../readyclasses.module.scss";
-import classes from "./Fieldset.module.scss";
-import { Typography, Variant } from "../../Typography/Typography";
-import { Input } from "../Input/Input";
-import { Select } from "../Select/Select";
-import { Radio } from "../Radio/Radio";
-import { Checkbox } from "../Checkbox/Checkbox";
-import { Textarea } from "../Textarea/Textarea";
-import { Toggle } from "../Toggle/Toggle";
-import { Label } from "../Label/Label";
-import { FormControl } from "../FormControl/FormControl";
-import { FormSelectorWrapper } from "../FormSelectorWrapper/FormSelectorWrapper";
-import { FormHelperText } from "../FormHelperText/FormHelperText";
-import { InputWrapper } from "../Wrapper/InputWrapper/InputWrapper";
-import { SelectWrapper } from "../Wrapper/SelectWrapper/SelectWrapper";
-import { TextareaWrapper } from "../Wrapper/TextareaWrapper/TextareaWrapper";
-
-export interface Props extends ComponentPropsWithRef<"fieldset"> {
-  children?: ReactElement | ReactElement[];
-  legend: string;
-  legendStyle?: Variant;
-  hideLegend?: boolean;
-  background?: string;
-  noPadding?: boolean;
-  noBackground?: boolean;
-  required?: boolean;
-  error?: boolean;
-  disablePropagation?: boolean;
-}
-
-const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> = (
-  {
-    children,
-    className,
-    legend,
-    legendStyle = "body",
-    hideLegend = false,
-    noBackground,
-    background = noBackground ? "" : "#FFF",
-    noPadding = false,
-    disabled = false,
-    required = false,
-    error = false,
-    disablePropagation = false,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const renderChildren = () => {
-    if (!children) {
-      return;
-    }
-
-    /* All right, so the issue is that whenever we try to add disabled and error to a component that doesn't accept it,
-    React will throw an error. However, it might occur that we want a component inside of Fieldset because of aesthetic purposes
-    (fieldset applies a sort of container with white background and if we want to display it inside of this container... then yea).
-    So instead we supply an array of components that we want to add the disabled and error prop to and check if child.type equals one of these. */
-    const allowedComponents: ReactNode[] = [
-      Input,
-      Select,
-      Radio,
-      Checkbox,
-      Textarea,
-      Toggle,
-      Label,
-      FormControl,
-      FormSelectorWrapper,
-      FormHelperText,
-      InputWrapper,
-      SelectWrapper,
-      TextareaWrapper
-    ];
-
-    return React.Children.map(children, (child: ReactElement) => {
-      if (allowedComponents.includes(child.type) && !disablePropagation) {
-        return React.cloneElement(child, {
-          disabled: child.props.disabled ?? disabled,
-          error: child.props.error ?? error
-        });
-      }
-
-      return child;
-    });
-  };
-
-  return (
-    <fieldset
-      {...rest}
-      ref={ref}
-      disabled={disabled}
-      style={{ backgroundColor: background, ...rest.style }}
-      className={`${classes.fieldset} ${noPadding ? classes["no-padding"] : ""} ${className ?? ""}`}
-    >
-      {legend && <legend className={readyclasses["sr-only"]}>{legend}</legend>}
-      {legend && !hideLegend && (
-        <Typography
-          variant={legendStyle}
-          tag="span"
-          aria-hidden="true"
-          className={`${classes["legend"]} ${required ? classes["required"] : ""} ${
-            error ? classes["error"] : ""
-          }`}
-        >
-          {legend}
-        </Typography>
-      )}
-      {renderChildren()}
-    </fieldset>
-  );
-};
-
-export const Fieldset = React.forwardRef(FieldsetComponent);

package/src/Form/FileUpload/FileItem/FileItem.modules.scss

@@ -1,75 +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 "../../../mixins.module.scss";
-
-.file-item-wrapper {
-  padding: 0.5rem 1.25rem;
-  border-radius: var(--input-border-radius);
-  background-color: var(--input-background-color);
-  @include transition(all, 0.2s, ease-in-out);
-
-  [class*="icon"] {
-    font-size: 1.25rem;
-  }
-
-  .progress-bar {
-    background-color: var(--color-black10);
-  }
-
-  span[class*="bar--"] {
-    border-radius: var(--input-border-radius);
-    height: 1rem;
-  }
-
-  .file-name {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    .friendly-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .action-icon {
-    margin-left: auto;
-    color: var(--color-primary);
-    cursor: pointer;
-    padding-left: 1.25rem;
-  }
-
-  .file-icon {
-    margin-right: 0.5rem;
-  }
-
-  .file-subtitle,
-  .progress-bar {
-    display: block;
-    margin: 0.3125rem 1.75rem;
-    padding: 0;
-  }
-
-  .error,
-  .retry {
-    color: var(--error);
-  }
-
-  .readonly {
-    color: var(--greyed-out);
-  }
-}