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

package/src/components/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -0,0 +1,125 @@
+/*
+ * 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, useRef } from "react";
+import { Input, Type, Props as InputProps } from "../../Input/Input";
+import classes from "./InputWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { useWrapper } from "../../../../hooks/useWrapper";
+import { withReadOnly } from "../../../withReadOnly";
+
+interface PartialInputProps extends Partial<InputProps> {}
+
+export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
+  label: string;
+  type: Type;
+  name: string;
+  inputProps?: PartialInputProps;
+  value: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  success?: boolean;
+}
+
+const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    type,
+    name,
+    inputProps,
+    helperText,
+    helperProps,
+    value,
+    className,
+    error,
+    errorMessageProps,
+    success,
+    onChange,
+    onBlur,
+    onFocus,
+    disabled,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, hasFocus, setHasFocus, helperId, labelId } = useWrapper();
+  const { prefix, suffix } = inputProps ?? {};
+  const input = useRef<HTMLInputElement>(null);
+  const labelClasses = [classes["input-label"]];
+  hasFocus && labelClasses.push(classes["focus"]);
+
+  const inputWrapperClasses = [];
+  inputProps?.wrapperProps?.className &&
+    inputWrapperClasses.push(inputProps?.wrapperProps?.className);
+  disabled && inputWrapperClasses.push(classes["disabled"]);
+  const readValue = rest["data-readonlyview"] as boolean;
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      name={name}
+      className={`${classes["input-wrapper"]} ${className ?? ""}`}
+      labelProps={{
+        id: labelId,
+        className: labelClasses.join(" ")
+      }}
+      errorId={errorId}
+      error={error}
+      errorMessageProps={errorMessageProps}
+      helperId={helperId}
+      helperText={helperText}
+      helperProps={{
+        ...helperProps,
+        className: `${classes["input-wrapper-helper"]} ${helperProps?.className ?? ""} `
+      }}
+      disabled={disabled}
+    >
+      <Input
+        {...inputProps}
+        prefix={prefix}
+        suffix={suffix}
+        readOnlyView={readValue}
+        wrapperProps={{
+          className: inputWrapperClasses.join(" ")
+        }}
+        ref={inputProps?.ref || input}
+        aria-labelledby={labelId}
+        aria-describedby={error ? errorId : helperId}
+        onChange={onChange}
+        onFocus={e => {
+          onFocus?.(e);
+          setHasFocus(true);
+        }}
+        onBlur={e => {
+          onBlur?.(e);
+          setHasFocus(false);
+        }}
+        className={`
+         ${inputProps?.className ?? ""}`}
+        name={name}
+        success={success}
+        error={error}
+        id={name}
+        value={value}
+        type={type}
+      />
+    </Wrapper>
+  );
+};
+
+export const InputWrapper = withReadOnly(React.forwardRef(InputWrapperComponent), {
+  isWrapperComponent: true
+});

package/src/components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.module.scss

@@ -0,0 +1,27 @@
+/*!
+ * 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 "../../../../variables";
+
+.select-label {
+  left: calc(
+    1.25rem + 2px
+  ); // 2px is for offset of the selectwrapper border. It's relative to the parent div which doesn't have a border.
+}
+
+.select-helper-text {
+  margin-top: 0.15rem;
+}

package/src/components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.tsx

@@ -0,0 +1,88 @@
+/*
+ * 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 } from "react";
+import classes from "./MultiSelectWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { useWrapper } from "../../../../hooks/useWrapper";
+import { MultiSelect } from "../../Select/MultiSelect/MultiSelect";
+import { MultiSelectProps } from "../../Select/Select.interfaces";
+import { withReadOnly } from "../../../withReadOnly";
+
+interface PartialSelectProps extends Partial<MultiSelectProps> {}
+
+export interface Props
+  extends Omit<ComponentPropsWithRef<"div">, "onChange">,
+    Omit<WrapperProps, "onChange" | "error"> {
+  children: ReactElement[] | ReactElement | number[];
+  placeholder?: string;
+  value: string[];
+  error?: boolean;
+  selectProps?: PartialSelectProps;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  success?: boolean;
+}
+
+const MultiSelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    error,
+    success,
+    value,
+    placeholder,
+    selectProps,
+    helperProps,
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, helperId, labelId } = useWrapper();
+
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      errorId={errorId}
+      helperId={helperId}
+      labelProps={{ id: labelId, className: classes["select-label"] }}
+      helperProps={{
+        ...helperProps,
+        className: `${classes["select-helper-text"]} ${helperProps?.className ?? ""}`
+      }}
+      error={error}
+    >
+      <MultiSelect
+        {...selectProps}
+        value={value}
+        labeledBy={labelId}
+        error={error}
+        success={success}
+        describedBy={error ? errorId : helperId}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={`${selectProps?.className ?? ""}`}
+        isReadOnlyView={!!rest["data-readonlyview"]}
+      >
+        {children as ReactElement[]}
+      </MultiSelect>
+    </Wrapper>
+  );
+};
+
+export const MultiSelectWrapper = withReadOnly(React.forwardRef(MultiSelectWrapperComponent), {
+  isWrapperComponent: true
+});

package/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.module.scss

@@ -0,0 +1,30 @@
+/*!
+ * 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.
+ */
+
+.radio-wrapper-helper {
+  margin-top: 1.25rem;
+}
+
+.radio-wrapper-error {
+  font-size: 1rem;
+  margin-left: 0;
+  line-height: unset;
+}
+
+.radio-wrapper-error [data-icon] {
+  font-size: var(--font-size-big);
+  vertical-align: text-bottom;
+}

package/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.tsx

@@ -0,0 +1,109 @@
+/*
+ * 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,
+  useEffect
+} from "react";
+import classes from "./RadioWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { useWrapper } from "../../../../hooks/useWrapper";
+import { Icons } from "../../../Icon/Icon";
+import { Fieldset, Props as FieldsetProps } from "../../../Form/Fieldset/Fieldset";
+import { withReadOnly } from "../../../withReadOnly";
+
+export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
+  children: ReactElement | ReactElement[];
+  fieldsetProps: FieldsetProps;
+  value: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    error,
+    errorMessageProps,
+    name,
+    helperText,
+    helperProps,
+    fieldsetProps,
+    value,
+    onChange,
+    disabled,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, helperId } = useWrapper();
+  const readOnlyView = !!rest["data-readonlyview"];
+
+  useEffect(() => {
+    if (fieldsetProps.legend === undefined) {
+      console.error(
+        `You should give your Fieldset component a legend prop so a legend element is rendered. This error was thrown in RadioWrapper. You can add this legend prop through the fieldsetProps prop by passing an object (fieldsetProps={{ legend: "legend here" }})`
+      );
+    }
+  }, []);
+
+  const renderChildren = () =>
+    React.Children.map(children, child => {
+      if (!readOnlyView || child.props.value === value) {
+        return React.cloneElement(child, {
+          parentErrorId: errorId,
+          error: error,
+          checked: child.props.value === value,
+          name: name,
+          parentHelperId: helperText ? helperId : false,
+          onChange: onChange,
+          disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
+        });
+      }
+      return null;
+    });
+
+  return (
+    <Fieldset {...fieldsetProps} disabled={disabled}>
+      <Wrapper
+        {...rest}
+        ref={ref}
+        disabled={disabled}
+        name={name}
+        helperId={helperId}
+        helperText={helperText}
+        helperProps={{
+          ...helperProps,
+          className: `${classes["radio-wrapper-helper"]} ${helperProps?.className ?? ""}`
+        }}
+        error={error}
+        errorId={errorId}
+        errorMessageIcon={Icons.Error}
+        errorMessageProps={{
+          ...errorMessageProps,
+          className: `${error ? classes["radio-wrapper-error"] : ""}`
+        }}
+      >
+        {renderChildren()}
+      </Wrapper>
+    </Fieldset>
+  );
+};
+
+export const RadioWrapper = withReadOnly(React.forwardRef(RadioWrapperComponent), {
+  isWrapperComponent: true
+});

package/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.module.scss

@@ -0,0 +1,27 @@
+/*!
+ * 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 "../../../../variables";
+
+.select-label {
+  left: calc(
+    1.25rem + 2px
+  ); // 2px is for offset of the selectwrapper border. It's relative to the parent div which doesn't have a border.
+}
+
+.select-helper-text {
+  margin-top: 0.15rem;
+}

package/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -0,0 +1,89 @@
+/*
+ * 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 } from "react";
+import classes from "./SelectWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { Select } from "../../Select/SingleSelect/Select";
+import { useWrapper } from "../../../../hooks/useWrapper";
+import { SingleSelectProps } from "../../Select/Select.interfaces";
+import { withReadOnly } from "../../../withReadOnly";
+
+interface PartialSelectProps extends Partial<SingleSelectProps> {}
+
+export interface Props
+  extends Omit<ComponentPropsWithRef<"div">, "onChange">,
+    Omit<WrapperProps, "onChange" | "error"> {
+  children: ReactElement[] | ReactElement | number[];
+  placeholder?: string;
+  value: string;
+  error?: boolean;
+  selectProps?: PartialSelectProps;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  success?: boolean;
+}
+
+const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    error,
+    success,
+    value,
+    placeholder,
+    selectProps,
+    helperProps,
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, helperId, labelId } = useWrapper();
+
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      errorId={errorId}
+      helperId={helperId}
+      labelProps={{ id: labelId, className: classes["select-label"] }}
+      helperProps={{
+        ...helperProps,
+        className: `${classes["select-helper-text"]} ${helperProps?.className ?? ""}`
+      }}
+      error={error}
+    >
+      <Select
+        {...selectProps}
+        value={value}
+        labeledBy={labelId}
+        error={error}
+        success={success}
+        describedBy={error ? errorId : helperId}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={`${selectProps?.className ?? ""}`}
+        isReadOnlyView={!!rest["data-readonlyview"]}
+      >
+        {children as ReactElement[]}
+      </Select>
+    </Wrapper>
+  );
+};
+
+const forwardedSelectWrapper = React.forwardRef(SelectWrapperComponent);
+forwardedSelectWrapper.displayName = "SelectWrapper";
+
+export const SelectWrapper = withReadOnly(forwardedSelectWrapper, { isWrapperComponent: true });

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -0,0 +1,100 @@
+/*!
+ * 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 "../../../../mixins.module.scss";
+
+.textarea-wrapper {
+  &:after {
+    content: "";
+    display: block;
+    width: calc(95%);
+    background-color: var(--light);
+    position: absolute;
+    z-index: 0;
+    left: 1px;
+    top: 1px;
+    border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
+
+    @include mixins.transition(all, 0.15s, ease-in-out);
+  }
+
+  &.disabled:after {
+    background-color: var(--disabled);
+  }
+
+  &.focus:after {
+    left: 2px;
+    top: 2px;
+  }
+
+  .textarea {
+    &:active:not(:disabled) {
+      border-color: var(--color-primary);
+    }
+
+    &:focus:not(:disabled) {
+      outline: none;
+    }
+
+    &:has([data-icon-status]) {
+      padding-right: 2.5rem;
+    }
+  }
+}
+
+.wrapper[data-readonlyview="true"] {
+  & ~ span.error {
+    background-color: var(--color-white);
+  }
+
+  & label + div:not(:has(input)) {
+    min-height: 4rem;
+    border: 1px solid var(--color-blue-grey100);
+    color: var(--read-only-text-color);
+    background-color: var(--color-white);
+    padding: 0.5rem 0.75rem;
+    font-family: var(--font-family);
+    font-size: var(--form-control-font-size);
+    position: relative;
+    border-radius: 0.125rem;
+    word-wrap: break-word;
+
+    & [data-icon-status] {
+      position: absolute;
+      right: 1.25rem;
+      top: 0.8rem;
+      font-size: var(--icon-font-big);
+      height: 1.25rem;
+      width: 1.25rem;
+    }
+
+    & [data-icon-status="error"] {
+      color: var(--error);
+    }
+
+    & [data-icon-status="success"] {
+      color: var(--success);
+    }
+
+    &:has([data-icon-status]) {
+      padding-right: 2.5rem;
+    }
+  }
+}
+
+.textarea-helper-text {
+  margin-top: 0.14rem;
+}