@luscii-healthtech/web-ui 1.0.0 → 2.2.0

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/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 />;
-```