@onepercentio/one-ui 0.28.8 → 0.29.0

package/src/components/Form/v2/FormField/FormField.types.ts

@@ -0,0 +1,129 @@
+import { ReactElement, ReactNode } from "react";
+import { SelectItem } from "../../../Select/Select";
+import { UploadTask } from "firebase/storage";
+import { UnresolvableOr } from "../../../../type-utils";
+
+export type GenericFormFieldProps<T extends FormField["type"]> = {
+  value: AnswerByField<{ type: T }>;
+  onAnswer: (FormFieldProps<{ type: T }> & {
+    mode: FormMode.WRITE;
+  })["onAnswer"];
+  question: FormFieldView & { type: T };
+  error?: string;
+};
+
+export type FormFieldProps<Q extends Pick<FormFieldView, "type">> = {
+  config: Q;
+  value: AnswerByField<Q>;
+} & (
+  | {
+      mode: FormMode.READ_ONLY;
+    }
+  | {
+      mode?: FormMode.WRITE;
+      onAnswer: <T extends Q["type"]>(
+        questionType: T,
+        questionId: string,
+        answer:
+          | AnswerAction<{
+              type: T;
+            }>
+          | undefined
+      ) => void;
+      error?: string | string[];
+    }
+);
+
+export enum FormMode {
+  READ_ONLY,
+  WRITE,
+}
+export type FormFieldView = FormField & {
+  title: string;
+};
+
+export type AnswerAction<F extends Pick<FormField, "type">> =
+  F["type"] extends "file" ? File : AnswerByField<F>;
+
+export type BasicFormFields =
+  | {
+      type: "select";
+      filter?: (item: SelectItem, term: string) => boolean;
+      options: SelectItem[];
+    }
+  | {
+      type: "text";
+      multiline?: number;
+    }
+  | {
+      type: "number";
+    };
+
+type DistributeValidatorOverUnion<FormFieldTypes extends { type: any }> =
+  FormFieldTypes extends any
+    ? FormFieldTypes & {
+        validator?: (
+          val: AnswerAction<FormFieldTypes> | undefined
+        ) => boolean | string;
+      }
+    : never;
+export type FormField = {
+  optional?: boolean;
+  id: string;
+} & DistributeValidatorOverUnion<
+  | BasicFormFields
+  | {
+      type: "radio";
+      options: SelectItem[];
+    }
+  | {
+      type: "check" | "rawcheck";
+      options: SelectItem[];
+    }
+  | {
+      type: "file";
+      fileUsageDescription: string;
+      extensions: string[];
+      footer: string;
+      openFile?: {
+        action: () => void;
+        label: string | ReactNode;
+      };
+    }
+  | {
+      type: "accept";
+      link: {
+        type: "file" | "route";
+        to: string;
+      };
+      contract: {
+        action: () => void;
+        label: string | ReactNode;
+      };
+      accept: {
+        label: string;
+        optional?: true;
+      }[];
+    }
+  | UnresolvableOr<OnepercentUtility.UIElements.FormExtension["fields"], {}>
+>;
+
+export type FormFieldTypes = FormField['type'] | 'accept'
+
+type ExternalQuestionFields = UnresolvableOr<
+  OnepercentUtility.UIElements.FormExtension["fieldAnswer"],
+  {}
+>;
+
+export type AnswerByField<F extends Pick<FormField, "type">> =
+  F["type"] extends "file"
+    ? UploadTask | true
+    : F["type"] extends "accept" | "check" | "rawcheck"
+    ? boolean[]
+    : F["type"] extends "radio" | "text" | "select" | "number"
+    ? string
+    : F["type"] extends keyof ExternalQuestionFields
+    ? OnepercentUtility.UIElements.FormExtension["fieldAnswer"][F["type"]]
+    : unknown;
+
+type O = FormField["type"];

package/src/components/Form/v2/FormField/index.tsx

@@ -0,0 +1 @@
+export { default } from './FormField';

package/src/components/Form/v2/index.tsx

@@ -0,0 +1 @@
+export { default } from './Form';

package/src/components/Freeze/Freeze.tsx

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren, ReactElement, useRef } from "react";
+import useFreeze from "../../hooks/useFreeze";
+
+/**
+ * Use this component when you would like to freeze some child when this child can assume undefined in the next 'frame'
+ **/
+export default function Freeze({ children }: PropsWithChildren<{}>) {
+  return useFreeze(children) as ReactElement;
+}

package/src/components/Freeze/index.tsx

@@ -0,0 +1 @@
+export { default } from './Freeze';

package/src/components/HSForms/HSForms.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef } from "react";
+
+export default function HSForms({
+  region,
+  partialId,
+  formId,
+  className,
+  onFormReady,
+  onFormSubmitted,
+}: {
+  region: "na1";
+  partialId: string;
+  formId: string;
+  className?: string;
+  onFormReady?: (div: HTMLDivElement, form: any) => void;
+  onFormSubmitted?: () => void;
+}) {
+  if ((window as any).PRERENDER) return null;
+  const container = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    import("jquery"!).then((jqueryModule) => {
+      const funcId = String(Math.round(Math.random() * 999999));
+      const idx = `onLoad${funcId}`;
+      const idx2 = `onSubmit${funcId}`;
+      (window as any)[idx as any] = function (form: any) {
+        if (onFormReady) onFormReady(container.current!, form);
+      };
+      (window as any)[idx2 as any] = function () {
+        if (onFormSubmitted) onFormSubmitted();
+      };
+      (window as any).jQuery = jqueryModule.default;
+      const script = document.createElement("script");
+      script.setAttribute("src", "https://js.hsforms.net/forms/v2.js");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("charset", "utf-8");
+      script.onload = () => {
+        const createFormScript = document.createElement("script");
+        createFormScript.setAttribute("type", "text/javascript");
+        createFormScript.innerHTML = `hbspt.forms.create({
+          region: "${region}",
+          portalId: "${partialId}",
+          formId: "${formId}",
+          submitButtonClass: '#',
+          css: ' ',
+          cssClass: '#',
+          onFormReady: ${idx},
+          onFormSubmit: ${idx2},
+          formInstanceId: ${funcId}
+        });`;
+        container.current!.appendChild(createFormScript);
+      };
+      document.head.appendChild(script);
+    });
+  }, [region, partialId, formId]);
+  return <div ref={container} className={className}></div>;
+}

package/src/components/HSForms/index.tsx

@@ -0,0 +1 @@
+export { default } from './HSForms';

package/src/components/Header/Header.module.scss

@@ -0,0 +1,119 @@
+@import "../../assets/styles/index.scss";
+
+.header {
+  position: sticky;
+  top: 0px;
+  width: 100%;
+  background-color: $headerFillBackgroundColor;
+  display: flex;
+  padding: 32px;
+  align-items: center;
+  font-family: $mainFontFamily;
+  z-index: 100;
+}
+
+.logo {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+
+  @media (orientation: portrait) {
+    display: none;
+  }
+}
+
+.option {
+  font-size: 18px;
+  line-height: 22px;
+  margin-right: 28px;
+  color: $headerTextColor;
+}
+
+.logoDivider {
+  margin: -32px 32px;
+  width: 1px;
+  background-color: $headerBackgroundColor;
+}
+
+.profile {
+  background-color: $headerBrightColor;
+  height: 36px;
+  width: 36px;
+  border-radius: 18px;
+  line-height: 36px;
+  text-align: center;
+}
+
+.profile,
+.profileName {
+  margin-right: 8px;
+}
+
+.profileName {
+  color: $headerBrightColor;
+
+  @media (orientation: portrait) {
+    display: none;
+  }
+}
+.headerOptions {
+  right: 0px;
+  width: fit-content;
+  margin-top: 18px;
+  z-index: 1000;
+  > * {
+    cursor: pointer;
+    backdrop-filter: var(--header-submenu-backdrop, initial);
+    padding: 12px 32px;
+    margin-bottom: 8px;
+    margin-left: 4px;
+    margin-right: 4px;
+    text-align: left;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+}
+.indicator {
+  @include iteractibleElement();
+  transition: transform $fast;
+  transform: rotateX(0deg);
+
+  &.open {
+    transform: rotateX(180deg);
+  }
+
+  display: none;
+  @media screen and (max-width: 640px) {
+    display: initial;
+  }
+  &.withMoreOptions {
+    display: initial;
+  }
+}
+
+.desktopOnly {
+  @media screen and (max-width: 640px) {
+    display: none;
+  }
+}
+
+.mobileOnly {
+  @media screen and (min-width: 640px) {
+    display: none;
+  }
+}
+
+.options-right {
+  .logo {
+    margin-right: auto;
+  }
+  .sectionDivider {
+    margin-left: initial;
+  }
+}
+
+.options-left {
+  .sectionDivider {
+    margin-left: auto;
+  }
+}

package/src/components/Header/Header.tsx

@@ -0,0 +1,138 @@
+import React, { PropsWithChildren, useEffect, useState } from "react";
+import { useOneUIContext } from "../../context/OneUIProvider";
+import { AnchoredTooltipAlignment } from "../AnchoredTooltip/AnchoredTooltip";
+import Collapsable from "../Collapsable";
+import Text from "../Text";
+import Styles from "./Header.module.scss";
+
+type Option = {
+  label: string;
+  onClick: () => void;
+};
+
+type User = {
+  name: string;
+  profilePicture?: string;
+};
+
+type MoreOptions = Option[];
+
+type Props = PropsWithChildren<{
+  optionsAlignment?: "left" | "right";
+  user?: User;
+  options: Option[];
+  moreOptions?: MoreOptions;
+  /**
+   * This controls the visbility of a control for showing or hiding a menu on mobile
+   */
+  responsive?: boolean;
+}>;
+
+/**
+ * A generic header implementation
+ **/
+export default function Header(props: Props) {
+  const { user, moreOptions } = props;
+  const [showMoreOptions, setShowMoreOptions] = useState(false);
+  const { LogoImage = () => null, MoreOptions = () => <div>v</div> } =
+    useOneUIContext().component.header;
+
+  useEffect(() => {
+    if (showMoreOptions) {
+      const close = () => setShowMoreOptions(false);
+      window.addEventListener("click", close);
+      return () => {
+        window.removeEventListener("click", close);
+      };
+    }
+  }, [showMoreOptions]);
+  return (
+    <header className={`${Styles.header} ${Styles[`options-${props.optionsAlignment || "left"}`]}`}>
+      <div className={Styles.logo}>
+        <LogoImage />
+        <div className={Styles.logoDivider} />
+      </div>
+      <Controls {...props} mode="desktop" />
+      {user ? (
+        user.profilePicture ? (
+          <img
+            className={Styles.profile}
+            data-testid="profile-container"
+            src={user.profilePicture!}
+          />
+        ) : (
+          <div className={Styles.profile} data-testid="profile-container">
+            {user.name
+              .split(" ")
+              .slice(0, 2)
+              .map((a) => a.charAt(0).toUpperCase())
+              .join("")}
+          </div>
+        )
+      ) : null}
+      {user ? <p className={Styles.profileName}>{user.name}</p> : null}
+      {
+        <Collapsable
+          title={
+            <div
+              className={`${Styles.indicator} ${
+                moreOptions ? Styles.withMoreOptions : ""
+              }`}
+            >
+              <MoreOptions open={showMoreOptions} />
+            </div>
+          }
+          data-testid="more-options-container"
+          open={showMoreOptions}
+          onToggleOpen={setShowMoreOptions}
+          mode="float"
+          contentClassName={Styles.headerOptions}
+          alignTo={AnchoredTooltipAlignment.CENTER}
+        >
+          <Controls {...props} mode="mobile" />
+          {moreOptions
+            ? moreOptions.map((opt) => (
+                <Text type="link" onClick={opt.onClick}>
+                  {opt.label}
+                </Text>
+              ))
+            : null}
+        </Collapsable>
+      }
+    </header>
+  );
+}
+
+function Controls({
+  options,
+  children,
+  mode,
+}: Props & { mode: "desktop" | "mobile" }) {
+  return (
+    <>
+      {options.map((option, i) => (
+        <Text
+          type="link"
+          key={option.label}
+          data-testid={`option-${i}`}
+          onClick={option.onClick}
+          className={`${Styles.option} ${
+            mode === "desktop" ? Styles.desktopOnly : Styles.mobileOnly
+          }`}
+        >
+          {option.label}
+        </Text>
+      ))}
+      <div className={Styles.sectionDivider} />
+      {children && (
+        <div
+          className={`${Styles.children} ${
+            mode === "desktop" ? Styles.desktopOnly : Styles.mobileOnly
+          }`}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/Header/index.tsx

@@ -0,0 +1 @@
+export { default } from './Header';

package/src/components/HeaderCloseBtn/HeaderCloseBtn.module.scss

@@ -0,0 +1,44 @@
+@import "../../assets/styles/index.scss";
+
+.headerButton {
+  width: 22px;
+  height: 22px;
+  position: relative;
+  opacity: 1;
+  @include iteractibleElement();
+  transition: opacity $fast, transform $fast;
+  &.pointOfNoReturn {
+    opacity: 0;
+  }
+  div {
+    transition: width $fast, top $fast, left $fast;
+    position: absolute;
+    height: 3px;
+    border-radius: 1.5px;
+    width: 22px;
+    background-color: $digitalBlue;
+    transform-origin: 1.5px 1.5px;
+    &:nth-child(1) {
+      transform: rotateZ(45deg);
+    }
+    &:nth-child(2) {
+      transform: rotateZ(-45deg);
+    }
+  }
+  &.back div {
+    width: 12.5px;
+    top: 5.5px;
+    left: 0px;
+  }
+  &.close div {
+    width: 22px;
+    &:nth-child(1) {
+      top: 0px;
+      left: 0px;
+    }
+    &:nth-child(2) {
+      top: 13px;
+      left: 0px;
+    }
+  }
+}

package/src/components/HeaderCloseBtn/HeaderCloseBtn.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Styles from "./HeaderCloseBtn.module.scss";
+
+/**
+ * A simple close button implemented with pure HTML and CSS
+ **/
+export default function HeaderButton({
+  mode,
+  hidden,
+  onClick,
+}: {
+  mode: "back" | "close";
+  hidden: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <div
+      data-testid="header-control-back"
+      className={`${Styles.headerButton} ${Styles[mode]} ${
+        hidden ? Styles.pointOfNoReturn : ""
+      }`}
+      onClick={onClick}
+    >
+      <div />
+      <div />
+    </div>
+  );
+}

package/src/components/HeaderCloseBtn/index.tsx

@@ -0,0 +1 @@
+export { default } from './HeaderCloseBtn';

package/src/components/InfinityScroll/InfinityScroll.module.scss

@@ -0,0 +1,30 @@
+.container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  overflow: auto;
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  > * {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  > :first-child {
+    // background-color: green;
+  }
+  > :nth-child(2) {
+    // background-color: yellow;
+  }
+  > :nth-child(3) {
+    // background-color: blue;
+  }
+}