@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/PreviewPhone/PreviewPhone.tsx

@@ -1,52 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import classNames from "classnames";
-
-import phoneMockup from "../../assets/phone-mockup.svg";
-
-import { useWindowDimensions } from "./useWindowDimensions";
-
-interface PreviewPhoneProps {
-  className?: string;
-  children: React.ReactNode;
-}
-
-const PreviewPhone = ({ className, children }: PreviewPhoneProps): JSX.Element => {
-  const phoneHeight = 637;
-  const phoneWidth = 340;
-  const [scale, setScale] = useState(1);
-  const [showPhone, setShowPhone] = useState(false);
-  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-
-  useEffect(() => {
-    // hack to offset rendering the phone after the first render
-    // this way the scale calculation works without fixed width
-    setShowPhone(true);
-  }, []);
-
-  const containerCallbak = useCallback(
-    (containerElement) => {
-      if (!containerElement) {
-        return;
-      }
-      const { clientWidth: containerWidth, clientHeight: containerHeight } = containerElement;
-      const heightScale = containerHeight < phoneHeight ? containerHeight / phoneHeight : 1;
-      const widthScale = containerWidth < phoneWidth ? containerWidth / phoneWidth : 1;
-      setScale(heightScale < widthScale ? heightScale : widthScale);
-    },
-    [windowHeight, windowWidth]
-  );
-
-  return (
-    showPhone ? (
-      <div ref={containerCallbak} className={classNames("relative h-full flex items-center justify-center", className)}>
-        <div className={"absolute"} style={{ width: phoneWidth, height: phoneHeight, transform: `scale(${scale})` }}>
-          <div className={"h-full px-5 pt-11 pb-20"}>
-            <div className={"h-full overflow-y-auto bg-white"}>{children}</div>
-          </div>
-          <img className="absolute top-0 pointer-events-none" src={phoneMockup} alt="phone mockup" />
-        </div>
-      </div>) : <></>
-  );
-};
-
-export default PreviewPhone;

package/src/components/PreviewPhone/useWindowDimensions.js

@@ -1,26 +0,0 @@
-import { useState, useEffect } from "react";
-import debounce from "lodash.debounce";
-
-export const useWindowDimensions = () => {
-  const [height, setHeight] = useState(window.innerHeight);
-  const [width, setWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = debounce(() => {
-      if (height !== window.innerHeight) {
-        setHeight(window.innerHeight);
-      }
-      if (width !== window.innerWidth) {
-        setWidth(window.innerWidth);
-      }
-    }, 500);
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
-  return { height, width };
-};

package/src/components/Radio/Radio.js

@@ -1,102 +0,0 @@
-import React, { PureComponent } from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import "./Radio.scss";
-import { Text } from "../Text/Text";
-
-/**
- * @deprecated: use RadioV2 instead
- */
-class Radio extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    text: PropTypes.string,
-    isChecked: PropTypes.bool.isRequired,
-    isDisabled: PropTypes.bool,
-    name: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    onChange: PropTypes.func,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isFocused: false,
-    };
-  }
-
-  handleChange = (event) => {
-    const { onChange } = this.props;
-
-    if (onChange) {
-      onChange(event);
-    }
-  };
-
-  handleFocus = () => {
-    this.setState({
-      isFocused: true,
-    });
-  };
-
-  handleBlur = () => {
-    this.setState({
-      isFocused: false,
-    });
-  };
-
-  render() {
-    const { className, isChecked, isDisabled, name, value, text } = this.props;
-
-    const { isFocused } = this.state;
-
-    const containerClassName = classNames("cweb-radio mr-4", className, {
-      "is-focused": isFocused,
-      "is-checked": isChecked,
-      "opacity-50": isDisabled,
-    });
-
-    return (
-      <div className={containerClassName} ref={this.containerRef}>
-        <label className="cweb-radio-label">
-          <input
-            className="cweb-radio-input"
-            name={name}
-            type="radio"
-            checked={isChecked}
-            disabled={isDisabled}
-            value={value}
-            onBlur={this.handleBlur}
-            onFocus={this.handleFocus}
-            onChange={this.handleChange}
-          />
-
-          <span
-            className={classNames("cweb-radio-icon-container", {
-              "bg-primary": isChecked,
-              "hover:bg-primary-dark": isChecked,
-              "outline-primary": isFocused,
-              "cursor-not-allowed": isDisabled,
-              "cursor-pointer": !isDisabled,
-            })}
-          >
-            <span className="cweb-radio-icon" />
-          </span>
-
-          {text && (
-            <Text
-              className={classNames("cweb-radio-label-text", {
-                "cursor-not-allowed": isDisabled,
-              })}
-              text={text}
-            />
-          )}
-        </label>
-      </div>
-    );
-  }
-}
-
-export default Radio;

package/src/components/Radio/Radio.scss

@@ -1,58 +0,0 @@
-@import "../../styles/colors";
-
-.cweb-radio {
-  outline: none;
-
-  .cweb-radio-input {
-    -webkit-appearance: none;
-    height: 1px;
-    opacity: 0;
-    width: 1px;
-  }
-
-  .cweb-radio-label-text {
-    margin-left: 8px;
-    user-select: none;
-    text-align: left;
-  }
-
-  .cweb-radio-label {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0;
-  }
-
-  .cweb-radio-icon-container {
-    width: 16px;
-    height: 16px;
-    position: relative;
-
-    border: 1px solid $color-border;
-    border-radius: 50%;
-
-    transition: background-color 0.3s ease-in-out;
-  }
-
-  .cweb-radio-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: block;
-  }
-
-  &.is-focused {
-    .cweb-radio-icon-container {
-      border-color: $color-primary;
-    }
-  }
-
-  &.is-checked {
-    .cweb-radio-icon {
-      width: 5px;
-      height: 5px;
-      background-color: $color-white;
-      border-radius: 50%;
-    }
-  }
-}

package/src/components/Radio/RadioV2.css

@@ -1,15 +0,0 @@
-.radio-form-field-label input[type="radio"]:checked + .radio-circle {
-  @apply bg-primary;
-}
-
-.radio-form-field-label[data-has-error="true"] .radio-circle {
-  @apply border-red-700;
-  @apply outline-negative;
-}
-
-.radio-form-field-label
-  input[type="radio"]:checked
-  + .radio-circle
-  .radio-inner-circle {
-  @apply bg-white;
-}

package/src/components/Radio/RadioV2.tsx

@@ -1,87 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import Text from "../Text/Text";
-
-import "./RadioV2.css";
-
-export interface RadioProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  name: string;
-  // value field is used by react-hook-form as the value returned
-  value: string | number;
-  // text shown to the user to explain the option
-  text?: string;
-  // text shown to the user underneath the text for extra information
-  info?: string;
-  isError?: boolean;
-  innerRef?: React.Ref<HTMLInputElement>;
-}
-
-function RadioInner({
-  text,
-  info,
-  isError,
-  innerRef,
-  className,
-  ...otherProps
-}: RadioProps): JSX.Element {
-  const { value, disabled } = otherProps;
-  const nameHtmlFor = `field-${value}`;
-
-  return (
-    <label
-      className="radio-form-field-label leading-tight"
-      htmlFor={nameHtmlFor}
-      data-has-error={isError}
-      data-test-id={nameHtmlFor}
-    >
-      <div className="flex flex-row items-center ">
-        <input
-          {...otherProps}
-          className={classNames("appearance-none", className)}
-          ref={innerRef}
-          type="radio"
-          id={nameHtmlFor}
-          disabled={disabled}
-        />
-        <span
-          className={classNames(
-            "flex flex-col items-center justify-center w-4 h-4 transition-colors duration-300 ease-in-out border radio-circle rounded-xl border-slate-300"
-          )}
-        >
-          <span className="block transition-colors duration-300 ease-in-out radio-inner-circle w-1.5 h-1.5 rounded-xl"></span>
-        </span>
-        {text && (
-          <div className="ml-2">
-            <Text
-              inline={true}
-              text={text}
-              type="base"
-              color={disabled ? "slate-500" : undefined}
-            />
-          </div>
-        )}
-      </div>
-      {info && (
-        <Text
-          inline={true}
-          className="ml-6"
-          text={info}
-          type="sm"
-          color={disabled ? "slate-200" : "slate-500"}
-        />
-      )}
-    </label>
-  );
-}
-
-/**
- * TODO: The CSS styling is all messed up, including isError
- * Warning: don't use this prop before this is resolved
- * Issue to track: https://github.com/Luscii/web-ui/issues/57
- * TODO: remove this comment once this is resolved
- */
-export const RadioV2 = React.forwardRef<HTMLInputElement, RadioProps>(
-  (props, ref) => <RadioInner {...props} innerRef={ref} />
-);

package/src/components/RadioGroup/RadioGroup.js

@@ -1,66 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import Radio from "../Radio/Radio";
-
-import "./RadioGroup.scss";
-
-/**
- * @deprecated: use RadioV2 instead
- */
-function RadioGroup({
-  className,
-  radioClassName,
-  name,
-  selectedOption,
-  isVertical,
-  radioOptions,
-  onChange,
-  error,
-  isDisabled,
-  ...otherOptions
-}) {
-  const containerClassName = classNames("cweb-radio-group", { vertical: isVertical }, { hasError: error }, className);
-
-  function handleChange(event) {
-    if (!isDisabled && onChange) {
-      onChange(event);
-    }
-  }
-
-  return (
-    <div className={containerClassName} {...otherOptions}>
-      {radioOptions.map((option) => (
-        <Radio
-          {...option}
-          key={option.value}
-          className={radioClassName}
-          name={name}
-          isChecked={selectedOption === option.value}
-          onChange={handleChange}
-          isDisabled={isDisabled}
-        />
-      ))}
-    </div>
-  );
-}
-
-RadioGroup.propTypes = {
-  className: PropTypes.string,
-  radioClassName: PropTypes.string,
-  name: PropTypes.string,
-  selectedOption: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  isVertical: PropTypes.bool,
-  radioOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string,
-      info: PropTypes.string,
-      isDisabled: PropTypes.bool,
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    })
-  ).isRequired,
-  onChange: PropTypes.func,
-};
-
-export default RadioGroup;

package/src/components/RadioGroup/RadioGroup.scss

@@ -1,37 +0,0 @@
-@import "../../styles/colors";
-@import "../../styles/layout";
-
-.cweb-radio-group {
-  @include flexbox-horizontal(center);
-
-  > .cweb-radio {
-    flex: 0 0 auto;
-    margin-right: 8px;
-  }
-
-  .cweb-form-field {
-    margin-bottom: 12px;
-  }
-
-  .cweb-form-info-text {
-    margin-left: 1.5rem;
-  }
-
-  &.vertical {
-    @include flexbox-vertical(flex-start);
-
-    .cweb-form-field:not(:last-child) {
-      margin-bottom: 8px;
-    }
-
-    > .cweb-radio {
-      flex: 0 0 auto;
-      margin-bottom: 8px;
-    }
-  }
-  &.hasError {
-    > .cweb-radio .cweb-radio-icon-container {
-      border: 1px solid $color-negative !important;
-    }
-  }
-}

package/src/components/RadioGroup/RadioGroupV2.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import { RadioProps, RadioV2 } from "../Radio/RadioV2";
-
-export interface RadioGroupProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"> {
-  name: string;
-  isError?: boolean;
-  options: Omit<RadioProps, "name">[];
-  innerRef?: React.Ref<HTMLInputElement>;
-}
-
-function RadioGroupInner({
-  innerRef,
-  options,
-  ...registerProps
-}: RadioGroupProps): JSX.Element {
-  return (
-    <div className={classNames("flex flex-col space-y-2")}>
-      {options.map((option) => (
-        <RadioV2
-          key={option.value}
-          {...option}
-          {...registerProps}
-          ref={innerRef}
-        />
-      ))}
-    </div>
-  );
-}
-
-export const RadioGroupV2 = React.forwardRef<HTMLInputElement, RadioGroupProps>(
-  (props, ref) => <RadioGroupInner {...props} innerRef={ref} />
-);

package/src/components/Section/Section.scss

@@ -1,74 +0,0 @@
-@import "../../styles/layout";
-@import "../../styles/colors";
-
-.cweb-section {
-  .cweb-button {
-    &:last-of-type {
-      margin-right: 24px;
-    }
-    &:not(:last-of-type) {
-      margin-right: 8px;
-    }
-    &.add-button,
-    &.edit-button,
-    &.delete-button {
-      margin-left: auto;
-      width: 32px;
-      height: 32px;
-    }
-    &.add-button {
-      background: url("../../assets/add.svg") no-repeat center;
-      background-size: contain;
-      &:hover,
-      &:active,
-      &:focus {
-        background: url("../../assets/add_hover.svg") no-repeat center;
-        background-size: contain;
-      }
-    }
-
-    &.edit-button {
-      background: url("../../assets/edit.svg") no-repeat center;
-      background-size: contain;
-      &:hover,
-      &:active,
-      &:focus {
-        background: url("../../assets/edit_hover.svg") no-repeat center;
-        background-size: contain;
-      }
-    }
-
-    &.delete-button {
-      background: url("../../assets/delete.svg") no-repeat center;
-      background-size: contain;
-      &:hover,
-      &:active,
-      &:focus {
-        background: url("../../assets/delete_hover.svg") no-repeat center;
-        background-size: contain;
-      }
-    }
-  }
-
-  > .cweb-section-header {
-    @include flexbox-horizontal(center, space-between);
-    border-bottom: 1px solid $color-divider;
-    width: 100%;
-    padding: 18px 24px;
-  }
-
-  > .cweb-section-footer {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    align-items: center;
-    border-top: 1px solid #eeeeee;
-    width: 100%;
-    padding: 1rem 24px 1rem 24px;
-
-    img {
-      width: 32px;
-      height: 32px;
-    }
-  }
-}

package/src/components/Section/Section.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import { ButtonProps } from "../Button/Button.types";
-import Button from "../Button/Button";
-import { Title } from "../Title/Title";
-import { LoadingIndicator, LoadingIndicatorProps } from "../LoadingIndicator/LoadingIndicator";
-import { RestPropped } from "../../types/general.types";
-
-import "./Section.scss";
-
-export interface SectionProps extends RestPropped {
-  title?: string;
-  buttons?: ButtonProps[];
-  footer?: React.ReactNode;
-  className?: string;
-  isLoading?: boolean;
-  loadingIndicatorProps?: LoadingIndicatorProps;
-  children?: React.ReactNode;
-}
-
-export function Section({
-  title,
-  buttons,
-  footer,
-  children,
-  className,
-  isLoading = false,
-  loadingIndicatorProps,
-  ...restProps
-}: SectionProps): JSX.Element {
-  return (
-    <div
-      {...restProps}
-      className={classNames(
-        "cweb-section",
-        "flex justify-start flex-col items-start",
-        "rounded-lg",
-        "mx-0 my-4",
-        "bg-white",
-        "w-full",
-        className
-      )}
-    >
-      {(title || buttons) && (
-        <div className="cweb-section-header" data-test-id="section-header">
-          {title && (
-            <div className="flex flex-row items-center">
-              <Title text={title} className="mr-3 cweb-section-title" type="sm" />
-              {isLoading && <LoadingIndicator asSpinner={true} {...loadingIndicatorProps} />}
-            </div>
-          )}
-          <div className={classNames("cweb-section-header-buttons-container", "flex flex-row space-x-3")}>
-            {buttons &&
-              buttons.length > 0 &&
-              buttons.map((button) => <Button {...button} key={button.key || button.id || button.text} />)}
-          </div>
-        </div>
-      )}
-
-      <div className="cweb-section-content w-full">{!isLoading && children}</div>
-
-      {footer && <div className="cweb-section-footer">{footer}</div>}
-    </div>
-  );
-}
-
-export default Section;

package/src/components/Section/SectionItem.scss

@@ -1,20 +0,0 @@
-@import "../../styles/colors";
-@import "../../styles/layout";
-
-.cweb-list-item {
-  @include flexbox-horizontal(center);
-  padding: 16px 0 16px 0;
-  border-bottom: 1px solid $color-divider;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &.cweb-list-item-clickable {
-    cursor: pointer;
-  }
-
-  &.cweb-list-item-clickable:hover {
-    background-color: $color-pale-grey;
-  }
-}

package/src/components/Section/SectionItem.tsx

@@ -1,26 +0,0 @@
-import React, { SyntheticEvent } from "react";
-import classNames from "classnames";
-
-import "./SectionItem.scss";
-
-export interface SectionItemProps {
-  className?: string;
-  onClick?: (event: SyntheticEvent) => void; // func
-  children?: React.ReactNode;
-}
-
-export const SectionItem: React.FC<SectionItemProps> = props => {
-  const { children, className, onClick, ...rest } = props;
-
-  const classes = classNames("cweb-list-item", className, {
-    "cweb-list-item-clickable": !!onClick,
-  });
-
-  return (
-    <div className={classes} onClick={onClick} {...rest}>
-      {children}
-    </div>
-  );
-};
-
-export default SectionItem;