@luscii-healthtech/web-ui 2.0.0 → 2.3.0

package/src/components/RadioGroup/RadioGroupV2.tsx

@@ -0,0 +1,35 @@
+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/Select/Select.tsx

@@ -13,10 +13,11 @@ import Select from "react-select/base";
  */
 import "./Select.scss";
 
-function generateCustomStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  hasError: boolean,
-  isIE11: boolean
-): StylesConfig<Option, IsMulti, Group> {
+function generateCustomStyles<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(hasError: boolean, isIE11: boolean): StylesConfig<Option, IsMulti, Group> {
   return {
     option: (baseStyles, state) => {
       return {
@@ -47,8 +48,12 @@ function generateCustomStyles<Option, IsMulti extends boolean, Group extends Gro
       const defaultBorderColor = state.isFocused ? "#045baa" : "#D1D5DB";
       const validatedBorderColor = hasError ? "#c53030" : defaultBorderColor;
 
-      const defaultOutline = hasError ? "rgba(255, 98, 102, 0.3)" : "rgba(0, 159, 227, 0.3)";
-      const validatedOutline = `4px solid ${state.isFocused ? defaultOutline : "transparent"}`;
+      const defaultOutline = hasError
+        ? "rgba(255, 98, 102, 0.3)"
+        : "rgba(0, 159, 227, 0.3)";
+      const validatedOutline = `4px solid ${
+        state.isFocused ? defaultOutline : "transparent"
+      }`;
 
       return {
         ...baseStyles,
@@ -101,24 +106,45 @@ function generateCustomStyles<Option, IsMulti extends boolean, Group extends Gro
   };
 }
 
-type CustomSelect = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+type CustomSelect = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
   props: Props<Option, IsMulti, Group>,
   ref: React.RefAttributes<SelectInstance<Option, IsMulti, Group>>
 ) => React.ReactElement;
 
+/**
+ * @deprecated: use SelectV2 instead
+ */
 const CustomSelect = React.forwardRef(
   <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
     props: Props<Option, IsMulti, Group>,
-    ref: Ref<Select<Option, IsMulti, Group>>,
+    ref: Ref<Select<Option, IsMulti, Group>>
   ) => {
     const { className, styles } = props;
 
     const hasError = className?.includes("has-error") || false;
-    const isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
-    const customStyles = generateCustomStyles<Option, IsMulti, Group>(hasError, isIE11);
-    const mergedStyles = mergeStyles<Option, IsMulti, Group>(customStyles, styles);
+    const isIE11 =
+      "MSInputMethodContext" in window && "documentMode" in document;
+    const customStyles = generateCustomStyles<Option, IsMulti, Group>(
+      hasError,
+      isIE11
+    );
+    const mergedStyles = mergeStyles<Option, IsMulti, Group>(
+      customStyles,
+      styles
+    );
 
-    return <ReactSelect<Option, IsMulti, Group> {...props} ref={ref} className={classNames("customized-select", className)} styles={mergedStyles} />;
+    return (
+      <ReactSelect<Option, IsMulti, Group>
+        {...props}
+        ref={ref}
+        className={classNames("customized-select", className)}
+        styles={mergedStyles}
+      />
+    );
   }
 ) as CustomSelect;
 

package/src/components/Select/SelectV2.tsx

@@ -0,0 +1,171 @@
+import type {
+  MultiValue,
+  OptionsOrGroups,
+  Props,
+  StylesConfig,
+  GroupBase, Options,
+} from "react-select";
+import ReactSelect, { mergeStyles } from "react-select";
+import React from "react";
+import classNames from "classnames";
+
+
+
+/**
+ * Exceptional case for this file:
+ * We use postcss-url to inline and base64 our image assets.
+ * But the library can only see as far as css files.
+ * When javascript gets in the way (react-select uses a package called `emotion` for styles), postcss-url cannot
+ * bundle the svg assets used here, and we end up with some broken style.
+ */
+import "./Select.scss";
+
+function generateCustomStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+  hasError: boolean,
+  isIE11: boolean,
+  ): StylesConfig<Option, IsMulti, Group> {
+  return {
+    option: (baseStyles, state) => {
+      return {
+        ...baseStyles,
+        fontWeight: state.isSelected ? "bold" : "normal",
+        fontSize: "14px",
+        backgroundColor: "none",
+        color: "inherit",
+        position: "relative",
+        padding: "0.75rem",
+        opacity: state.isDisabled ? "0.5" : 1,
+        "&:after": {
+          visibility: state.isSelected ? "visible" : "hidden",
+        },
+        transition: "background-color 0.3s ease-in-out",
+        "&:hover": {
+          // tailwind blue-50
+          backgroundColor: state.isSelected ? "transparent" : "#F2FAFD",
+        },
+        pointerEvents: state.isDisabled ? "none" : "auto",
+      };
+    },
+    container: (baseStyles) => {
+      return { ...baseStyles, flexGrow: isIE11 ? 0.5 : "initial" };
+    },
+    control: (baseStyles, state) => {
+      const defaultBorderColor = state.isFocused ? "#045baa" : "#D1D5DB";
+      const validatedBorderColor = hasError ? "#c53030" : defaultBorderColor;
+
+      const defaultOutline = hasError ? "rgba(255, 98, 102, 0.3)" : "rgba(0, 159, 227, 0.3)";
+      const validatedOutline = `4px solid ${state.isFocused ? defaultOutline : "transparent"}`;
+
+      return {
+        ...baseStyles,
+        fontSize: "14px",
+        transition: "border 0.3s ease-in-out",
+        height: isIE11 ? "50px" : "2.75rem",
+
+        // primary outline
+        outline: validatedOutline,
+
+        borderColor: validatedBorderColor,
+        borderWidth: "1px !important",
+        borderStyle: "solid",
+        borderRadius: "4px",
+
+        boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.05)",
+
+        "&:hover": {
+          borderColor: "#9CA3AF",
+          // selector for the chevron
+          "> [class*=\"IndicatorsContainer\"]": {
+            opacity: 1,
+          },
+        },
+      };
+    },
+    // The placeholder has the following css prop: grid-area: 1/1/2/3;
+    // And grid-area doesn't work on IE11, so we need to style it slightly different.
+    placeholder: (baseStyles) => ({
+      ...baseStyles,
+      fontWeight: 100,
+      color: "#6B7280",
+      paddingTop: isIE11 ? "1.2rem" : undefined,
+    }),
+    singleValue: (baseStyles) => {
+      return {
+        ...baseStyles,
+        paddingTop: isIE11 ? "1.2rem" : undefined,
+        fontSize: "14px",
+      };
+    },
+    indicatorSeparator: () => ({
+      display: "none",
+    }),
+    menu: (baseStyles) => ({
+      ...baseStyles,
+      zIndex: 20,
+    }),
+  };
+}
+
+// All the options require a value to work in the wrapper
+interface OptionMinimal {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any;
+  label?: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface SelectProps<Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>> extends Props<Option, IsMulti, Group> {
+  isError?: boolean;
+}
+
+/**
+ * A wrapper around react-select to style it according to our design specification.
+ *
+ * In addition, the value is taken out of the option, instead of returning the complete option.
+ *
+ * Care when using grouped options: the value of the options overspanning all groups need to be unique!
+ * For instance, if you have an option with value "chocolate" in both the groups "flavor" and "dip", then you get unforeseen errors.
+ * This is a problem within react-select itself, not our wrapper.
+ *
+ * Care when using defaultValue: this still requires the complete Option (instead of the value of the Option).
+ * So far there wasn't a use-case for this.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Select = React.forwardRef(<Option extends OptionMinimal, IsMulti extends boolean, Group extends GroupBase<Option>>(
+    { isError = false, styles, options, onChange, value, isMulti, className, ...otherProps }: SelectProps<Option, IsMulti, Group>,
+    innerRef,
+  ) => {
+    const isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
+    const customStyles = generateCustomStyles<Option, IsMulti, Group>(isError, isIE11);
+  const mergedStyles = mergeStyles<Option, IsMulti, Group>(customStyles, styles);
+
+    // the options can be either a list of options or a grouped list of options
+    // this is a typechecker to verify it is the case.
+    const isOptionsGrouped = !options ? false : (options as OptionsOrGroups<Option, Group>)
+      .reduce((acc, o) => acc || ("options" in o && !("values" in o)), false);
+    // we subsequently flatmap to ensure it's always a list of options
+    const flatmappedOptions = !options ? [] : isOptionsGrouped
+      ? (options as Group[]).flatMap((g) => g.options)
+      : options as Options<Option>;
+
+    // based on: https://stackoverflow.com/a/70022957
+    const onChangeWrapped = !onChange ? undefined : isMulti
+      ? (val, a) => onChange(val.map((v) => v.value), a)
+      : (val, a) => onChange(val?.value, a);
+    // TODO: how can we report the error if a value was given that is not within the options?
+    const valueWrapped = (!value || !options) ? value : isMulti
+      ? flatmappedOptions.filter((o) => (value as MultiValue<Option>).includes(o.value))
+      : flatmappedOptions.find((o) => o.value === value);
+
+    return <ReactSelect
+      {...otherProps}
+      ref={innerRef}
+      styles={mergedStyles}
+      options={options}
+      onChange={onChangeWrapped}
+      value={valueWrapped}
+      isMulti={isMulti}
+      className={classNames("customized-select", className)}
+    />;
+  },
+);

package/src/index.tsx

@@ -113,6 +113,9 @@ export { default as Text } from "./components/Text/Text";
 
 export { SearchInput, SearchInputProps } from "./components/Input/SearchInput";
 
+export { Form } from "./components/Form/Form";
+export { FormProps } from "./components/Form/form.types";
+
 export { IconProps } from "./components/Icons/types/IconProps.type";
 export { AddIcon } from "./components/Icons/AddIcon";
 export { AlertsIcon } from "./components/Icons/AlertsIcon";

package/src/styles/_skeleton.scss

@@ -0,0 +1,63 @@
+@mixin skeleton() {
+  .skeleton-box {
+    display: inline-block;
+    height: 1em;
+    position: relative;
+    overflow: hidden;
+    background-color: #cbd5e1; //slate 300
+    border-radius: 3px;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(
+                      90deg,
+                      rgba(#fff, 0) 0,
+                      rgba(#fff, 0.2) 20%,
+                      rgba(#fff, 0.5) 60%,
+                      rgba(#fff, 0)
+      );
+
+      animation: shimmer 800ms infinite;
+      content: "";
+    }
+
+    &.is-circle {
+      border-radius: 50%;
+    }
+
+    &.is-button {
+      background-color: #e2e8f0; //secondary button color
+      border-radius: 9999px;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transform: translateX(-100%);
+        background-image: linear-gradient(
+                        90deg,
+                        rgba(#ddd, 0) 0,
+                        rgba(#ddd, 0.2) 20%,
+                        rgba(#ddd, 0.5) 60%,
+                        rgba(#ddd, 0)
+        );
+
+        animation: shimmer 800ms infinite;
+        content: "";
+      }
+    }
+
+    @keyframes shimmer {
+      100% {
+        transform: translateX(100%);
+      }
+    }
+  }
+}

package/src/types/general.types.ts

@@ -1,5 +1,5 @@
 // This type is used to allow for other props to be injected into the component
-// For instance, for a data-testid or key
+// For instance, for a data-test-id or key
 export interface RestPropped {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;

package/src/components/Select/Select.examples.md

@@ -1,161 +0,0 @@
-```js
-class SelectExample extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      value: null,
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(event) {
-    this.setState({
-      value: event.target.value,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <Select
-          value={this.state.value}
-          name="value"
-          options={[
-            {
-              value: "option1",
-              text: "Option1",
-            },
-            {
-              value: "option2",
-              text: "Option2",
-            },
-            {
-              value: "option3",
-              text: "Option3",
-            },
-          ]}
-          onChange={this.handleChange}
-        />
-      </div>
-    );
-  }
-}
-<SelectExample />;
-```
-
-```js
-class SelectExampleWithPlaceholder extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      value: null,
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(event) {
-    this.setState({
-      value: event.target.value,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <Select
-          value={this.state.value}
-          name="value"
-          placeholder="Please select an option"
-          options={[
-            {
-              value: "option1",
-              text: "Option1",
-            },
-            {
-              value: "option2",
-              text: "Option2",
-            },
-            {
-              value: "option3",
-              text: "Option3",
-            },
-          ]}
-          onChange={this.handleChange}
-        />
-      </div>
-    );
-  }
-}
-<SelectExampleWithPlaceholder />;
-```
-
-```js
-const inForm = require("../HOCs/form/helpers/inForm").default;
-const SelectInForm = inForm(Select);
-
-class SelectExampleInForm extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      value: null,
-      error: null,
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleError = this.handleError.bind(this);
-  }
-
-  handleChange(event) {
-    this.setState({
-      value: event.target.value,
-    });
-  }
-
-  handleError() {
-    this.setState((prevState) => {
-      return {
-        error: prevState.error ? null : "This field is required",
-      };
-    });
-  }
-
-  render() {
-    return (
-      <div className="styleguide-in-form styleguide-component-block">
-        <Title type="tagline" text={"Example Select use in Form"} />
-
-        <SelectInForm
-          label="Field Label"
-          error={this.state.error}
-          value={this.state.value}
-          name="value"
-          placeholder="Please select an option"
-          options={[
-            {
-              value: "option1",
-              text: "Option1",
-            },
-            {
-              value: "option2",
-              text: "Option2",
-            },
-            {
-              value: "option3",
-              text: "Option3",
-            },
-          ]}
-          onChange={this.handleChange}
-        />
-
-        <Button text="Toggle ErrorWrapper" className="styleguide-margin-top-10" onClick={this.handleError} />
-      </div>
-    );
-  }
-}
-<SelectExampleInForm />;
-```