@luscii-healthtech/web-ui 0.1.0

package/src/components/Text/Text.scss

@@ -0,0 +1,67 @@
+@import "../../styles/colors";
+@import "../../styles/typography";
+
+.cweb-text {
+  $color: $color-body;
+  $color-fineprint: $color-text-lighter;
+  $color-small: $color-text-secondary;
+
+  $font-size: 1rem;
+  $font-size-small: 0.875rem;
+
+  $line-height: 1.31em;
+  $line-height-small: 1.25em;
+
+  @include text($font-size, $line-height, $color);
+
+  &.type-emphasized {
+    font-weight: bold;
+  }
+
+  &.type-error {
+    color: $color-negative-alt-emphasis;
+    font-size: $font-size-small;
+    line-height: $line-height-small;
+  }
+
+  &.type-strong {
+    font-weight: bold;
+    color: $color-text-emphasis;
+  }
+
+  &.type-small-dark {
+    font-size: $font-size-small;
+    line-height: $line-height-small;
+    color: $color-body;
+  }
+
+  &.type-small {
+    font-size: $font-size-small;
+    line-height: $line-height-small;
+    color: $color-small;
+  }
+
+  &.type-small-fineprint {
+    font-size: $font-size-small;
+    line-height: $line-height-small;
+    color: $color-fineprint;
+  }
+
+  &.type-fineprint {
+    color: $color-fineprint;
+  }
+
+  &.level-inline {
+    display: inline;
+  }
+
+  &.level-block {
+    display: block;
+  }
+}
+
+.in-html-link {
+  a:hover {
+    text-decoration: underline;
+  }
+}

package/src/components/Text/Text.tsx

@@ -0,0 +1,81 @@
+import classNames from "classnames";
+import React from "react";
+
+import { RestPropped } from "../../types/general.types";
+
+import "./Text.scss";
+
+export type TextStyle = "sm" | "sm-strong" | "base" | "strong" | "lg" | "lg-strong" | "xl" | "xl-strong" | string;
+
+//Extend with other colors that we want to enable for text
+export type TextColor = "base" | "gray-500" | "gray-200" | "white" | "blue" | "red" | "green" | "amber" | "inherit";
+
+export interface TextProps extends RestPropped {
+  text: string;
+  type?: TextStyle; //defaults to "base"
+  inline?: boolean; //defaults to false
+  color?: TextColor; //defaults to "base"
+  hoverColor?: TextColor; //defaults to "base"
+  className?: string;
+  containsDangerousHtml?: boolean; //defaults to false
+  truncate?: boolean; //defaults to false
+  "data-test-id"?: string;
+}
+
+export const Text = (props: TextProps): JSX.Element => {
+  const containerProps = {
+    "data-test-id": props["data-test-id"],
+    className: classNames(
+        // apply different style classes
+        // for now we stick with font-size 16px on the body
+        // so I am adjusting our styles accordingly (one step down)
+        {
+          "text-xs font-medium": props.type === "sm",
+          "text-xs font-semibold": props.type === "sm-strong",
+          "text-sm": props.type === "base",
+          "text-sm font-semibold": props.type === "strong",
+          "": props.type === "lg",
+          "font-semibold": props.type === "lg-strong",
+          "text-lg": props.type === "xl",
+          "font-semibold text-lg": props.type === "xl-strong",
+        },
+        {
+          inline: props.inline,
+          // FIXME: this class doesn't do anything without a max-width
+          truncate: props.truncate,
+        },
+        {
+          "text-slate-700": props.color === "base",
+          "text-slate-500": props.color === "gray-500",
+          "text-slate-200": props.color === "gray-200",
+          "text-red-700": props.color === "red",
+          "text-green-700": props.color === "green",
+          "text-yellow-700": props.color === "amber",
+          "text-blue-700": props.color === "blue",
+          "text-white": props.color === "white",
+          "text-primary-dark": props.color === "blue",
+        },
+        {
+          "in-html-link": props.containsDangerousHtml,
+        },
+        //can be used to overwrite other classes like the color
+        props.className
+    ),
+  };
+
+  return props.containsDangerousHtml ? (
+    <p {...containerProps} dangerouslySetInnerHTML={{ __html: props.text }} />
+  ) : (
+    <p {...containerProps}>{props.text}</p>
+  );
+};
+
+export default Text;
+
+Text.defaultProps = {
+  type: "base",
+  inline: false,
+  color: "base",
+  containsDangerousHtml: false,
+  truncate: false,
+};

package/src/components/TextEditor/TextEditor.js

@@ -0,0 +1,61 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import PropTypes from "prop-types";
+import ReactQuill from "react-quill";
+
+import "react-quill/dist/quill.snow.css";
+import "./TextEditor.scss";
+
+export default function TextEditor({ defaultValue, onValueChange, placeholder }) {
+  const formats = ["bold", "italic", "underline", "strike", "list", "bullet", "link", "video"];
+  const toolbarLastGroup = ["link", "video"];
+  const quillRef = useRef();
+
+
+  useEffect(() => {
+    if (quillRef.current) {
+      const quillInstance = quillRef.current;
+      const tooltipSave = quillInstance.editor.theme.tooltip.save;
+
+      quillInstance.editor.theme.tooltip.save = function () {
+        // overwrite save link functionality
+        let url = this.textbox.value;
+
+        if (url.indexOf("http") === -1 || url.indexOf("https") === -1) {
+          url = `https://${url}`;
+          this.textbox.value = url;
+        }
+        tooltipSave.call(this);
+      };
+    }
+  }, []);
+
+  const modules = useMemo(() => {
+    return {
+      toolbar: {
+        container: [
+          ["bold", "italic", "underline", "strike"],
+          [{ list: "ordered" }, { list: "bullet" }],
+          toolbarLastGroup,
+        ],
+      },
+    };
+  }, []);
+
+  return (
+    <ReactQuill
+      ref={quillRef}
+      theme="snow"
+      modules={modules}
+      placeholder={placeholder}
+      formats={formats}
+      value={defaultValue}
+      onChange={onValueChange}
+    />
+  );
+}
+
+TextEditor.propTypes = {
+  defaultValue: PropTypes.string,
+  placeholder: PropTypes.string,
+  onValueChange: PropTypes.func.isRequired,
+};

package/src/components/TextEditor/TextEditor.scss

@@ -0,0 +1,14 @@
+@import "../../styles/colors";
+
+.ql-editor {
+  resize: vertical;
+  min-height: 10rem;
+}
+
+.ql-snow.ql-toolbar {
+  display: block;
+  background: $color-slate-100;
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
+  margin-top: 0.5em;
+}

package/src/components/TextEditorV2/TextEditorV2.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from "react";
+import { EditorState, convertToRaw, ContentState } from "draft-js";
+import { Editor } from "react-draft-wysiwyg";
+import draftToHtml from "draftjs-to-html";
+import htmlToDraft from "html-to-draftjs";
+
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+import "./TextEditorV2.scss";
+
+export const TextEditorV2 = ({ defaultValue, onValueChange, locale }) => {
+  const [editorState, setEditorState] = useState(EditorState.createEmpty());
+
+  const getOptions = () => {
+    const options = ["inline", "list", "link", "textAlign", "history"];
+    options.splice(options.length - 1, 0, "embedded");
+    return options;
+  };
+
+  useEffect(() => {
+    const { contentBlocks, entityMap } = htmlToDraft(defaultValue);
+    setEditorState(EditorState.createWithContent(ContentState.createFromBlockArray(contentBlocks, entityMap)));
+  }, []);
+
+  const onEditorStateChange = (state) => {
+    setEditorState(state);
+    onValueChange(draftToHtml(convertToRaw(state.getCurrentContent())));
+  };
+
+  return (
+    <div className="editor">
+      <Editor
+        toolbar={{
+          options: getOptions(),
+          inline: {
+            options: ["bold", "italic", "underline"],
+          },
+          list: {
+            options: ["unordered", "ordered"],
+          },
+          link: {
+            showOpenOptionOnHover: false,
+            defaultTargetOption: "_blank",
+          },
+        }}
+        editorState={editorState}
+        onEditorStateChange={onEditorStateChange}
+        wrapperClassName="mb-6"
+        toolbarClassName="border border-solid border-color-border-primary"
+        editorClassName="border border-solid border-color-border-primary h-56"
+        localization={{
+          locale: locale,
+        }}
+      />
+    </div>
+  );
+};
+
+export default TextEditorV2;

package/src/components/TextEditorV2/TextEditorV2.scss

@@ -0,0 +1,110 @@
+.editor {
+  .rdw-editor {
+    overflow-y: auto;
+
+    .rdw-link-modal {
+      width: 20rem;
+      height: 19rem;
+
+      .rdw-link-modal-label,
+      .rdw-link-modal-target-option {
+        font-weight: normal;
+      }
+
+      .rdw-link-modal-input {
+        margin-bottom: 1rem;
+
+        font-size: 16px;
+        font-weight: normal;
+        line-height: 21px;
+        color: #2d2d2d;
+        height: 44px;
+        border: 1px solid #cccccc;
+        border-radius: 4px;
+        outline: none;
+        background-color: #ffffff;
+        padding: 12px;
+        caret-color: #0a78b2;
+      }
+
+      .rdw-link-modal-buttonsection {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+
+        .rdw-link-modal-btn {
+          border-radius: 1.375rem;
+          width: 6.5rem;
+          height: 2.75rem;
+          border: 1px solid #009fe3;
+          background-color: transparent;
+          color: #009fe3;
+        }
+
+        .rdw-link-modal-btn:first-child,
+        .rdw-link-modal-btn:disabled {
+          background: #009fe3;
+          color: #ffffff;
+        }
+      }
+    }
+
+    .rdw-embedded-modal {
+      width: 22rem;
+      height: 15rem;
+
+      .rdw-embedded-modal-link-input,
+      .rdw-embedded-modal-size-input {
+        font-size: 16px;
+        font-weight: normal;
+        line-height: 21px;
+        color: #2d2d2d;
+        height: 44px;
+        border: 1px solid #cccccc;
+        border-radius: 4px;
+        outline: none;
+        background-color: #ffffff;
+        padding: 12px;
+        caret-color: #0a78b2;
+      }
+
+      .rdw-embedded-modal-link-input {
+        width: 100%;
+      }
+
+      .rdw-embedded-modal-size-input {
+        width: 90%;
+      }
+
+      .rdw-embedded-modal-btn-section {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .rdw-embedded-modal-btn {
+          border-radius: 1.375rem;
+          width: 6.5rem;
+          height: 2.75rem;
+          border: 1px solid #009fe3;
+          background-color: transparent;
+          color: #009fe3;
+        }
+
+        .rdw-embedded-modal-btn:first-child,
+        .rdw-embedded-modal-btn:disabled {
+          background: #009fe3;
+          color: #ffffff;
+        }
+      }
+    }
+
+    .rdw-editor-main {
+      min-height: 14rem;
+      overflow: hidden;
+
+      .DraftEditor-root {
+        margin: 0 12px;
+      }
+    }
+  }
+}

package/src/components/TextLink/TextLink.tsx

@@ -0,0 +1,42 @@
+import classNames from "classnames";
+import React from "react";
+
+export interface TextLinkProps {
+  text: string;
+  enabled?: boolean;
+  href?: string;
+  rel?: string;
+  target?: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+export const TextLink = (props: TextLinkProps): JSX.Element => {
+  const className = classNames(
+    "text-sm hover:underline",
+    {
+      "cursor-pointer": props.enabled,
+      "cursor-default": !props.enabled,
+    },
+    {
+      "text-blue-800": props.enabled,
+      "text-slate-800": !props.enabled,
+    },
+    {
+      "hover:text-blue-900": props.enabled,
+      "hover:text-slate-900": !props.enabled,
+    }
+  );
+
+  return (
+    <a
+      href={props.href}
+      rel={props.rel}
+      target={props.target}
+      onClick={props.onClick}
+      className={classNames(className, props.className)}
+    >
+      {props.text}
+    </a>
+  );
+};

package/src/components/TextListItem/TextListItem.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import LegacyText from "../Text/LegacyText";
+import "./TextListItem.scss";
+import ListItem from "../ListItem/ListItem";
+
+function TextListItem(props) {
+  const { text, icon, className, iconClass, onClick, ...rest } = props;
+
+  const mergedClasses = classNames("cweb-text-list-item", className);
+  const iconClasses = classNames("cweb-text-list-item-icon", iconClass);
+
+  return (
+    <ListItem className={mergedClasses} onClick={onClick} {...rest}>
+      {icon && <img className={iconClasses} src={icon} alt="" />}
+      <LegacyText text={text} />
+    </ListItem>
+  );
+}
+
+TextListItem.propTypes = {
+  text: PropTypes.string.isRequired,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  className: PropTypes.string,
+  iconClass: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export default TextListItem;

package/src/components/TextListItem/TextListItem.scss

@@ -0,0 +1,10 @@
+@import "../../styles/colors";
+@import "../../styles/layout";
+
+.cweb-text-list-item {
+  .cweb-text-list-item-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 16px;
+  }
+}

package/src/components/Textarea/Textarea.js

@@ -0,0 +1,108 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import "./Textarea.scss";
+
+const RESIZE_TYPES = {
+  NONE: "none",
+  BOTH: "both",
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical",
+};
+
+Textarea.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  maxLength: PropTypes.number,
+  rows: PropTypes.number,
+  resizable: PropTypes.oneOf([RESIZE_TYPES.BOTH, RESIZE_TYPES.HORIZONTAL, RESIZE_TYPES.VERTICAL, RESIZE_TYPES.NONE]),
+  isDisabled: PropTypes.bool,
+  icon: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onCtrlEnter: PropTypes.func,
+};
+
+function Textarea(props) {
+  const {
+    className,
+    value,
+    name,
+    placeholder,
+    maxLength,
+    rows = 4,
+    resizable = RESIZE_TYPES.VERTICAL,
+    isDisabled = false,
+    icon,
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyPress,
+    onKeyDown,
+    onCtrlEnter,
+    ...otherProps
+  } = props;
+
+  let style;
+
+  if (icon) {
+    style = {
+      backgroundImage: `url(${icon})`,
+    };
+  }
+
+  return (
+    <textarea
+      {...otherProps}
+      name={name}
+      value={value}
+      placeholder={placeholder}
+      onChange={onChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      onKeyPress={onKeyPress}
+      onKeyDown={(event) => {
+        onKeyDown?.();
+        const { ctrlKey, metaKey, key } = event;
+
+        if ((ctrlKey || metaKey) && key === "Enter") {
+          onCtrlEnter?.();
+        }
+      }}
+      maxLength={maxLength}
+      rows={rows}
+      disabled={isDisabled}
+      className={classNames(
+        "cweb-textarea",
+        className,
+        "p-2",
+        "border",
+        "placeholder-gray-500",
+        "text-sm",
+        "border-solid",
+        "border-input-border",
+        "hover:border-input-border-dark",
+        "focus:outline-primary",
+        "transition-colors",
+        "duration-300",
+        "w-full",
+        "focus:border-primary",
+        {
+          "has-icon": !!icon,
+          resizable: resizable === RESIZE_TYPES.BOTH,
+          "resizable-x": resizable === RESIZE_TYPES.HORIZONTAL,
+          "resizable-y": resizable === RESIZE_TYPES.VERTICAL,
+        }
+      )}
+      style={style}
+    />
+  );
+}
+
+export default Textarea;

package/src/components/Textarea/Textarea.scss

@@ -0,0 +1,56 @@
+@import "../../styles/colors";
+@import "../../styles/typography";
+@import "../../styles/layout";
+
+.cweb-textarea {
+  border: 1px solid $color-border;
+  border-radius: $default-border-radius;
+  outline: none;
+  background-color: $color-white;
+
+  resize: none;
+
+  &.has-icon {
+    background-size: 24px;
+    background-position: 10px 10px;
+    background-repeat: no-repeat;
+    padding-left: 44px;
+  }
+
+  &.resizable {
+    resize: both;
+  }
+
+  &.resizable-x {
+    resize: horizontal;
+  }
+
+  &.resizable-y {
+    resize: vertical;
+  }
+
+  &::placeholder {
+    color: $color-text-lighter;
+  }
+
+  &:-ms-input-placeholder {
+    color: $color-placeholder !important;
+  }
+
+  &::-ms-input-placeholder {
+    color: $color-placeholder;
+  }
+
+  &:focus {
+    border-color: $color-primary;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &.has-error {
+    border: 1px solid $color-negative;
+    color: $color-negative;
+  }
+}