@luscii-healthtech/web-ui 0.1.0

package/src/components/Title/LegacyTitle.js

@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import "./Title.scss";
+
+const TITLE_TYPE_OPTIONS = {
+  DEFAULT: "default",
+  BIG: "big",
+  SMALL: "small",
+  TINY: "tiny",
+  BOLD: "bold",
+};
+
+LegacyTitle.propTypes = {
+  text: PropTypes.string.isRequired,
+  type: PropTypes.oneOf([
+    TITLE_TYPE_OPTIONS.DEFAULT,
+    TITLE_TYPE_OPTIONS.BIG,
+    TITLE_TYPE_OPTIONS.SMALL,
+    TITLE_TYPE_OPTIONS.TINY,
+    TITLE_TYPE_OPTIONS.BOLD,
+  ]),
+  className: PropTypes.string,
+};
+
+function LegacyTitle({ text, type, className = "", ...otherProps }) {
+  let ContainerElement;
+
+  const containerClassName = classNames("cweb-title", className, {
+    "type-default": !type || type === TITLE_TYPE_OPTIONS.DEFAULT,
+    "type-big": type === TITLE_TYPE_OPTIONS.BIG,
+    "type-small": type === TITLE_TYPE_OPTIONS.SMALL,
+    "type-tiny": type === TITLE_TYPE_OPTIONS.TINY,
+    "type-bold": type === TITLE_TYPE_OPTIONS.BOLD,
+  });
+
+  switch (type) {
+    case TITLE_TYPE_OPTIONS.DEFAULT:
+    case TITLE_TYPE_OPTIONS.BOLD:
+    case TITLE_TYPE_OPTIONS.BIG:
+      ContainerElement = "h1";
+      break;
+
+    case TITLE_TYPE_OPTIONS.SMALL:
+    case TITLE_TYPE_OPTIONS.TINY:
+      ContainerElement = "h3";
+      break;
+
+    default:
+      ContainerElement = "h1";
+      break;
+  }
+
+  return (
+    <ContainerElement {...otherProps} className={containerClassName}>
+      {text}
+    </ContainerElement>
+  );
+}
+
+export default LegacyTitle;
+
+export { TITLE_TYPE_OPTIONS };

package/src/components/Title/Title.scss

@@ -0,0 +1,65 @@
+@import "../../styles/layout";
+@import "../../styles/colors";
+
+@font-face {
+  font-family: "AvenirNextLTPro-Regular";
+  src: url("../../styles/fonts/avenir/3A0AF8_1_0.eot");
+  src: url("../../styles/fonts/avenir/3A0AF8_1_0.eot?#iefix") format("embedded-opentype"),
+    url("../../styles/fonts/avenir/3A0AF8_1_0.woff2") format("woff2"),
+    url("../../styles/fonts/avenir/3A0AF8_1_0.woff") format("woff"),
+    url("../../styles/fonts/avenir/3A0AF8_1_0.ttf") format("truetype");
+}
+@mixin title($font-size, $color) {
+  font-family: "AvenirNextLTPro-Regular", "Roboto", sans-serif;
+  color: $color;
+  font-size: $font-size;
+  margin: 0;
+}
+@font-face {
+  font-family: "AvenirNextLTPro-Bold";
+  src: url("../../styles/fonts/avenir/3A0AF8_0_0.eot");
+  src: url("../../styles/fonts/avenir/3A0AF8_0_0.eot?#iefix") format("embedded-opentype"),
+    url("../../styles/fonts/avenir/3A0AF8_0_0.woff2") format("woff2"),
+    url("../../styles/fonts/avenir/3A0AF8_0_0.woff") format("woff"),
+    url("../../styles/fonts/avenir/3A0AF8_0_0.ttf") format("truetype");
+}
+
+@mixin title-bold($font-size, $color) {
+  font-family: "AvenirNextLTPro-Bold", "Roboto", sans-serif;
+  font-weight: bold;
+  color: $color;
+  font-size: $font-size;
+  margin: 0;
+}
+
+.title {
+  font-family: "AvenirNextLTPro-Bold", "Roboto", sans-serif;
+}
+
+.cweb-title {
+  $color: $color-text-emphasis;
+
+  $font-size: 1.75em;
+  $font-size-big: 2.25em;
+  $font-size-small: 1.25em;
+  $font-size-tiny: 1em;
+
+  @include flexbox-horizontal(center);
+  @include title($font-size, $color);
+
+  &.type-tiny {
+    @include title-bold($font-size-tiny, $color);
+  }
+
+  &.type-small {
+    @include title-bold($font-size-small, $color);
+  }
+
+  &.type-big {
+    font-size: $font-size-big;
+  }
+
+  &.type-bold {
+    @include title-bold($font-size, $color);
+  }
+}

package/src/components/Title/Title.tsx

@@ -0,0 +1,57 @@
+import classNames from "classnames";
+import React from "react";
+
+import "./Title.scss";
+
+export type TitleStyle = "sm" | "base" | "lg" | "xl" | "2xl";
+
+export interface TextProps {
+  text: string;
+  type?: TitleStyle; //defaults to "base"
+  className?: string;
+}
+
+export const Title = (props: TextProps): JSX.Element => {
+  const containerClassName = classNames(
+    "title", //this is used to load the correct font from the css
+    "font-bold",
+    {
+      "text-slate-700": !props.className?.match(/\s(text-)/),
+      "text-xl": props.type === "sm",
+      "text-2xl": props.type === "base",
+      "text-3xl": props.type === "lg",
+      "text-4xl ": props.type === "xl",
+      "text-6xl ": props.type === "2xl",
+    },
+    props.className
+  );
+
+  let ContainerElement: React.ElementType;
+
+  switch (props.type) {
+    case "sm":
+      ContainerElement = "h5";
+      break;
+    case "base":
+      ContainerElement = "h4";
+      break;
+    case "lg":
+      ContainerElement = "h3";
+      break;
+    case "xl":
+      ContainerElement = "h2";
+      break;
+    case "2xl":
+      ContainerElement = "h1";
+      break;
+    default:
+      ContainerElement = "h4";
+      break;
+  }
+
+  return <ContainerElement className={containerClassName}>{props.text}</ContainerElement>;
+};
+
+Title.defaultProps = {
+  type: "base",
+};

package/src/components/ViewItem/ViewItem.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import classNames from "classnames";
+
+import Text, { TextProps } from "../Text/Text";
+import Button from "../Button/Button";
+import { RestPropped } from "../../types/general.types";
+import { ButtonProps } from "../Button/Button.types";
+
+export interface ViewItemProps<AccessoryType> extends RestPropped {
+  titleProps?: TextProps;
+  // deprecated: use titleProps instead
+  title?: string;
+  titleAccessory?: AccessoryType;
+  // these props are injected in a Text component, allowing for customisation
+  contentProps?: TextProps[];
+  // these strings are injected in a default Text component
+  // deprecated: use contentProps instead
+  content?: string[];
+  // if contentProps and content are both empty or null, this value will be presented instead
+  defaultContent?: string;
+  className?: string;
+  buttons?: ButtonProps[];
+}
+
+export function ViewItem<AccessoryType>({
+  titleProps,
+  title,
+  titleAccessory,
+  contentProps,
+  content,
+  defaultContent = "-",
+  className,
+  buttons,
+  ...restProps
+}: ViewItemProps<AccessoryType>): JSX.Element {
+  const titlePropsMerged = titleProps ?? { text: title ?? defaultContent };
+  const contentPropsMerged =
+    contentProps ??
+    content?.map((line) => {
+      return { text: line, className: "cweb-view-content-text" } as TextProps;
+    });
+
+  return (
+    <div className={classNames("vitals-view-item", className)} {...restProps}>
+      <div className={"vitals-view-item-title-line flex justify-start flex-row items-start"}>
+        {titlePropsMerged && (
+          <Text
+            className={classNames(titlePropsMerged.className, "vitals-view-item-title mb-1 mr-2")}
+            color="gray-500"
+            {...titlePropsMerged}
+          />
+        )}
+        {titleAccessory}
+      </div>
+      {contentPropsMerged &&
+        contentPropsMerged?.map((textProps) => <Text {...textProps} key={textProps.key || textProps.text} />)}
+      {(!contentPropsMerged || contentPropsMerged?.length === 0) && <Text text={defaultContent} key="empty-text" />}
+
+      <div className="flex flex-row cweb-view-buttons" key="cweb-view-buttons">
+        {buttons &&
+          buttons.map((button) => (
+            <Button
+              {...button}
+              className={classNames("cweb-view-button ml-3", button.className)}
+              key={button.key || button.text}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}
+
+export default ViewItem;

package/src/index.tsx

@@ -0,0 +1,14 @@
+import React, { FC, HTMLAttributes, ReactChild } from "react";
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactChild;
+}
+
+// Please do not use types off of a default export module or else Storybook Docs will suffer.
+// see: https://github.com/storybookjs/storybook/issues/9556
+/**
+ * A custom Thing component. Neat!
+ */
+export const Thing: FC<Props> = ({ children }) => {
+  return <div className={"mt-10 bg-red-500 p-5 rounded-md"}>{children || "this is a test"}</div>;
+};

package/src/styles/_colors.scss

@@ -0,0 +1,59 @@
+//colors
+
+$input-border: #d1d5db;
+$input-background: #d1d5db;
+$input-border-dark: #9ca3af;
+
+$color-background-secondary: #f3f4f6;
+
+$color-toggle-switch-background: #6abfa6;
+
+$color-primary: #0074dd;
+$color-secondary: #374151;
+$color-white: #ffffff;
+$color-body: #2d2d2d;
+
+$color-emphasis-background: #e8f5fc;
+$color-primary-emphasis: #045baa;
+$color-primary-light: #2da8e5;
+$color-luscii-pink: #ff0099;
+$color-luscii-green: #6abfa5;
+
+$color-positive: #4ad461;
+$color-positive-support: #e7f5ec;
+$color-negative: #ff6266;
+$color-negative-support: #fff1f1;
+$color-warning: #ffad62;
+$color-warning-support: #ffedd5;
+
+$color-chrome: #f3f3f3;
+$color-divider: #eeeeee;
+$color-border: #cccccc;
+$color-accent: #b9b9b9;
+//$color-text-lighter: #9F9F9F; This is an experiment from Dennis to see if it becomes better for our users. Leaving this here if we want to switch back.
+$color-text-lighter: #737373;
+$color-pale-grey: #f2fafd;
+$color-pale-green: #e7f5ec;
+$color-pale-grey-2: #f1f1f1;
+$color-placeholder: #64748b; // slate-500
+$color-slate-50: #f8fafc; // slate-50
+$color-slate-100: #f1f5f9; // slate-100
+$color-slate-700: #334155; // slate-700
+$color-text-secondary: #737373;
+$color-text-emphasis: #0f3554;
+
+$color-comp-dark: #32918f;
+$color-comp-light: #57bbb9;
+$color-comp-alt: #43bbe7;
+$color-comp-active: #516ed0;
+$color-comp-darker: #46375f;
+$color-comp-darkest: #1f1e1e;
+
+$color-negative-alt: #ff6660;
+$color-negative-alt-emphasis: #e55b56;
+$color-branding-support-1: #6abfa5;
+$color-branding-support-2: #6670a5;
+$color-branding-support-4: #0f3554;
+
+$color-helper-1: #c5d0de;
+$color-emphasis-2: #f0f8f6;

package/src/styles/_layout.scss

@@ -0,0 +1,64 @@
+// media query breakpoints
+$max-small-screen-width: 767px;
+$min-medium-screen-width: $max-small-screen-width + 1px;
+
+$default-height: 44px;
+$default-border-radius: 4px;
+$header-container-height: 75px;
+
+$header-z-index: 10000;
+$sidemenu-z-index: 10001;
+$sidebar-container-z-index: 11000;
+$modal-window-overlay-z-index: 12000;
+$modal-window-z-index: 13000;
+$modal-window-drag-item-z-index: $modal-window-z-index + 100;
+
+@mixin flexbox-layout($align-items: flex-start, $justify-content: flex-start, $flex-direction: row) {
+  display: flex;
+  justify-content: $justify-content;
+  flex-direction: $flex-direction;
+  align-items: $align-items;
+}
+
+// tailwind: flex justify-start flex-row items-start
+@mixin flexbox-horizontal($align-items: flex-start, $justify-content: flex-start) {
+  @include flexbox-layout($align-items, $justify-content, row);
+}
+
+// tailwind: flex justify-start flex-col items-start
+@mixin flexbox-vertical($align-items: flex-start, $justify-content: flex-start) {
+  @include flexbox-layout($align-items, $justify-content, column);
+}
+
+@mixin horizontal-static-position($position: absolute, $z-index: 1, $distance: 0) {
+  position: $position;
+  left: $distance;
+  right: $distance;
+  z-index: $z-index;
+}
+
+@mixin static-position($position: absolute, $z-index: 1, $distance: 0) {
+  @include horizontal-static-position($position, $z-index, $distance);
+  top: $distance;
+  bottom: $distance;
+}
+
+@mixin vertical-padding($padding-top, $padding-bottom: $padding-top) {
+  padding-top: $padding-top;
+  padding-bottom: $padding-bottom;
+}
+
+@mixin horizontal-padding($padding-left, $padding-right: $padding-left) {
+  padding-left: $padding-left;
+  padding-right: $padding-right;
+}
+
+@mixin vertical-margin($margin-top, $margin-bottom: $margin-top) {
+  margin-top: $margin-top;
+  margin-bottom: $margin-bottom;
+}
+
+@mixin horizontal-margin($margin-left, $margin-right: $margin-left) {
+  margin-left: $margin-left;
+  margin-right: $margin-right;
+}

package/src/styles/_shadows.scss

@@ -0,0 +1,19 @@
+@mixin box-shadow-1dp() {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.14);
+}
+
+@mixin box-shadow-2dp() {
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.14);
+}
+
+@mixin box-shadow-4dp() {
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
+}
+
+@mixin box-shadow-8dp() {
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.14);
+}
+
+@mixin box-shadow-basic($x: 0px, $y: 5px) {
+  box-shadow: $x $y 14px 2px rgba(0, 0, 0, 0.12);
+}

package/src/styles/_typography.scss

@@ -0,0 +1,8 @@
+@mixin text($font-size, $line-height, $color, $font-weight: normal) {
+  font-family: "Inter", "Roboto", sans-serif;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: $line-height;
+  color: $color;
+  margin: 0;
+}

package/src/styles/_utils.scss

@@ -0,0 +1,45 @@
+@mixin cweb-reset-element() {
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  text-decoration: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+@mixin cweb-truncate() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@mixin cweb-box-shadow($top, $left, $blur, $color, $top2: false, $left2: false, $blur2: false, $color2: false) {
+  $spread: 0;
+  $params: $top $left $blur $spread $color;
+  @if $top2
+  { $params: $top $left $blur $spread $color, $top2 $left2 $blur2 $spread $color2; }
+
+  box-shadow: $params;
+
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    $spread: 1px;
+    $params: $top $left $blur $spread $color;
+    @if $top2
+    { $params: $top $left $blur $spread $color, $top2 $left2 $blur2 $spread $color2; }
+
+    box-shadow: $params;
+  }
+}
+
+.cweb-box-shadow-default {
+  @include cweb-box-shadow(0, 2px, 2px, rgba(0, 0, 0, 0.24), 0, 0, 2px, rgba(0, 0, 0, 0.12));
+}

package/src/types/general.types.ts

@@ -0,0 +1,11 @@
+// This type is used to allow for other props to be injected into the component
+// For instance, for a data-testid or key
+export interface RestPropped {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+export interface HookReturn<T> extends RestPropped {
+  data: T | undefined;
+  isLoading: boolean;
+}

package/src/utils/useOutsideClick.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+const useOutsideClick = (ref, callback) => {
+  const handleClick = (e) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  });
+};
+
+export default useOutsideClick;