@luscii-healthtech/web-ui 0.1.0

package/src/components/Icons/SmallSquareIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface SmallSquareIconProps {
+  className?: string;
+}
+
+export const SmallSquareIcon = (props: SmallSquareIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor" />
+      <circle cx="15.5" cy="8.5" r="1.5" fill="white" fillOpacity="0.1" />
+    </svg>
+  );
+};

package/src/components/Icons/SpaceRocketIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface SpaceRocketIconProps {
+  className?: string;
+}
+
+export const SpaceRocketIcon = (props: SpaceRocketIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.18977 6.34976C7.14977 8.63976 5.74977 11.9298 5.61977 12.2398L3.35977 11.2698C2.70977 10.9898 2.54977 10.1398 3.04977 9.63976L6.05977 6.62976C6.52977 6.15976 7.20977 5.94976 7.86977 6.07976L9.18977 6.34976ZM10.6798 16.5098C10.9798 16.8098 11.4198 16.8898 11.7998 16.7098C12.9598 16.1698 15.4498 14.8998 17.0598 13.2898C21.6498 8.69976 21.6898 4.95976 21.4198 3.35976C21.3498 2.95976 21.0298 2.63976 20.6298 2.56976C19.0298 2.29976 15.2898 2.33976 10.6998 6.92976C9.08977 8.53976 7.82977 11.0298 7.27977 12.1898C7.09977 12.5698 7.18977 13.0198 7.47977 13.3098L10.6798 16.5098ZM17.6498 14.8098C15.3598 16.8498 12.0698 18.2498 11.7598 18.3798L12.7298 20.6398C13.0098 21.2898 13.8598 21.4498 14.3598 20.9498L17.3698 17.9398C17.8398 17.4698 18.0498 16.7898 17.9198 16.1298L17.6498 14.8098ZM8.93977 17.4098C9.13977 18.4698 8.78977 19.4498 8.11977 20.1198C7.34977 20.8898 4.95977 21.4598 3.40977 21.7598C2.71977 21.8898 2.10977 21.2798 2.23977 20.5898C2.53977 19.0398 3.09977 16.6498 3.87977 15.8798C4.54977 15.2098 5.52977 14.8598 6.58977 15.0598C7.75977 15.2798 8.71977 16.2398 8.93977 17.4098ZM12.9998 8.99976C12.9998 7.89976 13.8998 6.99976 14.9998 6.99976C16.0998 6.99976 16.9998 7.89976 16.9998 8.99976C16.9998 10.0998 16.0998 10.9998 14.9998 10.9998C13.8998 10.9998 12.9998 10.0998 12.9998 8.99976Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/types/IconProps.type.ts

@@ -0,0 +1,3 @@
+export interface IconProps {
+  className?: string;
+}

package/src/components/InfoBlock/InfoBlock.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import "./InfoBlock.scss";
+import { Text } from "../Text/Text";
+
+InfoBlock.propTypes = {
+  message: PropTypes.string.isRequired,
+  containsDangerousHtml: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+function InfoBlock({ message, className, containsDangerousHtml = false }) {
+  const containerClassName = classNames("cweb-info-block", className);
+
+  return (
+    <div className={containerClassName}>
+      <Text text={message} containsDangerousHtml={containsDangerousHtml} />
+    </div>
+  );
+}
+
+export default InfoBlock;

package/src/components/InfoBlock/InfoBlock.scss

@@ -0,0 +1,20 @@
+@import '../../styles/colors';
+
+.cweb-info-block {
+  position: relative;
+  padding: 16px 16px 16px 56px;
+  background-color: $color-emphasis-background;
+  border-radius: 8px;
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 16px;
+    top: 14px;
+    z-index: 1;
+    width: 24px;
+    height: 23px;
+    background: url("../../assets/info-icon.svg") no-repeat center;
+    background-size: contain;
+  }
+}

package/src/components/InfoField/InfoField.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import classNames from "classnames";
+import ClipboardJS from "clipboard";
+
+import { Text } from "../Text/Text";
+
+type InfoFieldLinkType = "none" | "link" | "clipboard" | "tel";
+
+interface InfoFieldProps {
+  label: string;
+  value: string;
+  linkType: InfoFieldLinkType;
+  supportsMultiline?: boolean;
+  onCopyToClipboard?: () => void;
+  icon?: JSX.Element;
+  className?: string;
+}
+
+export const InfoField = (props: InfoFieldProps): JSX.Element => {
+  const clipboard = new ClipboardJS("button");
+
+  clipboard.on("success", function (e) {
+    props.onCopyToClipboard && props.onCopyToClipboard();
+    e.clearSelection();
+  });
+
+  let ContainerElement: React.ElementType;
+  let containerProps: any;
+
+  switch (props.linkType) {
+    case "link":
+      ContainerElement = "a";
+      containerProps = {
+        href: props.value,
+        target: "_blank",
+        rel: "noopener noreferrer",
+      };
+      break;
+    case "tel":
+      ContainerElement = "a";
+      containerProps = { href: `tel:${props.value}` };
+      break;
+
+    case "clipboard":
+      ContainerElement = "button";
+      containerProps = {
+        type: "button",
+        "data-clipboard-text": props.value,
+      };
+      break;
+
+    case "none":
+    default:
+      ContainerElement = "div";
+      break;
+  }
+
+  return (
+    <div className={classNames("flex flex-row align-center items-center", props.className)}>
+      {props.icon}
+      <ContainerElement className={"flex flex-col overflow-hidden ml-3 first:ml-0"} {...containerProps}>
+        <Text
+          text={props.label}
+          type={"sm"}
+          color={"gray-500"}
+          className={classNames(
+            { "break-words": props.supportsMultiline },
+            { "whitespace-no-wrap": !props.supportsMultiline }
+          )}
+        />
+        <Text
+          className={classNames(
+            { "break-words": props.supportsMultiline },
+            { "whitespace-no-wrap": !props.supportsMultiline }
+          )}
+          text={props.value}
+          truncate={!props.supportsMultiline}
+        />
+      </ContainerElement>
+    </div>
+  );
+};
+
+InfoField.defaultProps = {
+  linkType: "none",
+};

package/src/components/Input/Input.examples.md

@@ -0,0 +1,94 @@
+```js
+const lockIcon = require("../../../styleguide/assets/icons/lock-icon.svg");
+const mailIcon = require("../../../styleguide/assets/icons/mail-icon.svg");
+
+class InputExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: "",
+      password: "",
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({
+      [event.target.name]: event.target.value,
+    });
+  }
+
+  render() {
+    return (
+      <div className="styleguide-flex-vertical styleguide-width-400 styleguide-height-150">
+        <Text text={"Text:"} />
+        <Input name="value" icon={mailIcon} value={this.state.value} onChange={this.handleChange} />
+
+        <Text text={"Password:"} />
+        <Input
+          name="password"
+          type="password"
+          icon={lockIcon}
+          value={this.state.password}
+          onChange={this.handleChange}
+        />
+      </div>
+    );
+  }
+}
+<InputExample />;
+```
+
+```js
+const inForm = require("../HOCs/form/helpers/inForm").default;
+const InputInForm = inForm(Input);
+
+class InputExampleInForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: "",
+      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 Input use in Form"} />
+
+        <InputInForm
+          label="Field Label"
+          error={this.state.error}
+          name="my-input"
+          value={this.state.value}
+          onChange={this.handleChange}
+        />
+
+        <Button text="Toggle ErrorWrapper" className="styleguide-margin-top-10" onClick={this.handleError} />
+      </div>
+    );
+  }
+}
+<InputExampleInForm />;
+```

package/src/components/Input/Input.js

@@ -0,0 +1,141 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import cross from "../../assets/color-variant-cross.svg";
+
+const INPUT_TYPES = {
+  EMAIL: "email",
+  NUMBER: "number",
+  PASSWORD: "password",
+  TEXT: "text",
+};
+
+Input.propTypes = {
+  className: PropTypes.string,
+  type: PropTypes.oneOf([INPUT_TYPES.EMAIL, INPUT_TYPES.NUMBER, INPUT_TYPES.PASSWORD, INPUT_TYPES.TEXT]),
+  value: PropTypes.any,
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  clearable: PropTypes.bool,
+  maxLength: PropTypes.number,
+  isDisabled: PropTypes.bool,
+  withPrefix: PropTypes.string,
+  withSuffix: PropTypes.string,
+  icon: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  id: PropTypes.string,
+  setRef: PropTypes.any,
+};
+
+function Input({
+  withSuffix = "",
+  withPrefix = "",
+  className = "",
+  clearable = false,
+  type = INPUT_TYPES.TEXT,
+  isDisabled = false,
+  icon,
+  setRef = () => undefined,
+  onChange,
+  name,
+  value,
+  ...otherProps
+}) {
+  const hasNoExtraContent = withPrefix === "" && withSuffix === "";
+
+  let style;
+  if (icon) {
+    style = {
+      backgroundSize: "1.125rem",
+      backgroundPosition: "1rem",
+      backgroundImage: `url(${icon})`,
+      backgroundRepeat: "no-repeat",
+    };
+  }
+
+  return (
+    <div className="relative flex flex-row">
+      <span
+        className={classNames(
+          "h-11",
+          {
+            hidden: hasNoExtraContent,
+            "order-1": withPrefix !== "",
+            "order-2": withSuffix !== "",
+            "rounded-l border-l": withPrefix !== "",
+            "rounded-r border-r": withSuffix !== "",
+          },
+          "border-t border-b border-solid border-input-border",
+          "flex flex-col items-center p-3",
+          "text-sm",
+          "text-slate-500",
+          "bg-main-background"
+        )}
+      >
+        {withSuffix || withPrefix}
+      </span>
+      <input
+        {...otherProps}
+        name={name}
+        value={value}
+        onChange={onChange}
+        ref={setRef}
+        size={otherProps.maxLength}
+        type={type}
+        disabled={isDisabled}
+        className={classNames(
+          "cweb-input",
+          "block",
+          { "pl-10": icon, "pr-11": clearable },
+          "h-11",
+          "p-2",
+          "border",
+          "text-sm",
+          "text-slate-700",
+          "bg-white",
+          "placeholder-slate-500",
+          "border-solid",
+          "border-input-border",
+          "hover:border-input-border-dark",
+          "focus:outline-primary",
+          "transition-colors",
+          "duration-300",
+          "focus:border-primary",
+          {
+            "z-10": withSuffix !== "" || withPrefix !== "", // to make sure the outline is displayed completely
+            rounded: hasNoExtraContent,
+            "rounded-l": withSuffix !== "",
+            "rounded-r": withPrefix !== "",
+            "order-2": withPrefix !== "",
+            "order-1": withSuffix !== "",
+          },
+          "shadow-default",
+          className
+        )}
+        style={style}
+      />
+      <span
+        style={{
+          background: `url(${cross}) center no-repeat`,
+          backgroundSize: "1.5rem",
+        }}
+        className={classNames(
+          "absolute right-0 transform top-1/2",
+          "-translate-y-1/2 block w-6 h-6 mr-3  cursor-pointer text-input-icon",
+          { hidden: !clearable }
+        )}
+        onClick={() => {
+          onChange && onChange({ target: { name: name, value: "" }, currentTarget: { name: name, value: "" } });
+        }}
+      />
+    </div>
+  );
+}
+
+export default Input;
+export { INPUT_TYPES };

package/src/components/Line/Line.js

@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+const Line = ({ left, right, className }) => (
+  <div className={classNames(className, "cweb-line", "flex flex-row flex-no-wrap")}>
+    <div className={"flex"}>
+      {left?.map(
+        (item) =>
+          item && (
+            <div key={item.key ?? item.props.id} className={"mr-3 flex items-center"}>
+              {item}
+            </div>
+          )
+      )}
+    </div>
+    <div className={"flex-grow"} />
+    <div className={"flex"}>
+      {right?.map((item) => {
+        return (
+          item && (
+            <div key={item.key ?? item.props.id} className={"ml-3 first:ml-0"}>
+              {item}
+            </div>
+          )
+        );
+      })}
+    </div>
+  </div>
+);
+
+Line.propTypes = {
+  left: PropTypes.array,
+  right: PropTypes.array,
+  className: PropTypes.string,
+};
+
+export default Line;

package/src/components/ListItem/ListItem.scss

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

@@ -0,0 +1,26 @@
+import React from "react";
+import classNames from "classnames";
+
+import "./ListItem.scss";
+
+export interface ListItemProps {
+  className?: string;
+  onClick?: any; // func
+  children?: any;
+}
+
+export const ListItem: React.FC<ListItemProps> = (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 ListItem;

package/src/components/ListTable/ListTable.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
+
+import { TextProps, Text } from "../Text/Text";
+import PaginationMenu from "../PaginationMenu/PaginationMenu";
+import LoadingIndicator from "../LoadingIndicator/LoadingIndicator";
+import SearchNotFoundImage from "../../assets/search-not-found.svg";
+import { RestPropped } from "../../types/general.types";
+
+import ListTableRow from "./ListTableRow";
+import { ListTableHeader } from "./ListTableHeader";
+
+export type ListTableItem = RestPropped;
+
+export interface ListTableProps<ItemType extends ListTableItem, CellType> extends RestPropped {
+  items?: ItemType[];
+  configuration: ListTablePropsConfiguration<ItemType, CellType>;
+  pageCount?: number;
+  currentPage?: number;
+  onRowClick?: (arg: ItemType) => void;
+  onPageClick?: (arg: number) => void;
+  isLoading?: boolean;
+  showHeader?: boolean;
+  className?: string;
+  localization: {page: string, next :string, previous: string};
+}
+
+export interface ListTablePropsConfiguration<ItemType extends ListTableItem, CellType> {
+  // this value is used if the field function is returning nothing
+  emptyValue?: string;
+  fields: ListTablePropsConfigurationField<ItemType, CellType>[];
+  idField: keyof ItemType;
+  emptyListText: string;
+}
+
+export interface ListTablePropsConfigurationField<ItemType extends ListTableItem, CellType> {
+  // this is used as a key and is expected to be unique. It doesn't do anything else other than guiding the developer
+  name: string;
+  // this sets the column title in the header
+  title?: string;
+  className?: string;
+  // this function can return any item that will be displayed directly in the table cell
+  // if this function returns a string, it will be wrapped in Text
+  field: (arg: ItemType) => string | CellType;
+  // if field results in a string, then these props will be spread into the Text component
+  textProps?: Omit<TextProps, "text">;
+}
+
+export function ListTable<ItemType extends ListTableItem, CellType>({
+  items = [],
+  configuration,
+  pageCount = 0,
+  currentPage = 1,
+  onPageClick,
+  onRowClick,
+  isLoading = false,
+  showHeader = true,
+  className,
+    localization,
+  ...restProps
+}: ListTableProps<ItemType, CellType>): JSX.Element {
+  // For not displaying empty view at creation
+  const [isPristine, setIsPristine] = useState(true);
+
+  useEffect(() => {
+    setIsPristine(false);
+  }, [items, isLoading]);
+
+  const showEmptyView = !isPristine && !isLoading && !(items && items.length > 0);
+
+  return (
+    <div
+      className={classNames(
+        "cweb-list-table",
+        "relative w-full max-w-full rounded-lg overflow-hidden bg-white",
+        className
+      )}
+      {...restProps}
+    >
+      <table className="w-full border-collapse cweb-list-table-table">
+        {showHeader && <ListTableHeader configurationFields={configuration.fields} />}
+
+        <tbody>
+          {!isLoading &&
+            items &&
+            items.map((item) => (
+              <ListTableRow
+                key={item[configuration.idField]}
+                onClick={onRowClick}
+                item={item}
+                configuration={configuration}
+              />
+            ))}
+
+          {isLoading && (
+            <tr>
+              <td colSpan={configuration.fields.length}>
+                <LoadingIndicator
+                  className={classNames(
+                    "cweb-list-table-content-loader",
+                    "relative h-16",
+                    "flex justify-center flex-row items-center",
+                    "py-0 px-3"
+                  )}
+                  asModal={false}
+                />
+              </td>
+            </tr>
+          )}
+
+          {showEmptyView && (
+            <tr>
+              <td colSpan={configuration.fields.length}>
+                <div
+                  className={classNames(
+                    "cweb-list-table-no-items",
+                    "flex justify-center flex-col items-center",
+                    "py-4 px-3"
+                  )}
+                >
+                  <img className="mb-4 no-item-found-image" src={SearchNotFoundImage} alt="no-image-found" />
+                  <Text
+                    className={classNames(
+                      "no-item-found-text",
+                      "w-56 text-base text-gray-600 text-center whitespace-pre-wrap"
+                    )}
+                    text={configuration.emptyListText}
+                  />
+                </div>
+              </td>
+            </tr>
+          )}
+        </tbody>
+
+        {!showEmptyView && pageCount > 0 && onPageClick && (
+          <tfoot>
+            <tr>
+              <td colSpan={configuration.fields.length}>
+                <div
+                  className={classNames(
+                    "cweb-list-table-footer",
+                    "flex justify-center flex-row items-center",
+                    "h-20 py-4 px-4"
+                  )}
+                >
+                  <PaginationMenu onPageClick={onPageClick} pageCount={pageCount} currentPage={currentPage} localization={localization}/>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+        )}
+      </table>
+    </div>
+  );
+}
+
+export default ListTable;