@onepercentio/one-ui 0.29.2 → 0.29.5

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

@@ -1,129 +0,0 @@
-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

@@ -1,2 +0,0 @@
-export { default } from "./FormField";
-export * from "./FormField";

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

@@ -1,2 +0,0 @@
-export { default } from "./Form";
-export * from "./Form";

package/src/components/Freeze/Freeze.tsx

@@ -1,9 +0,0 @@
-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

@@ -1,2 +0,0 @@
-export { default } from "./Freeze";
-export * from "./Freeze";

package/src/components/HSForms/HSForms.tsx

@@ -1,57 +0,0 @@
-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

@@ -1,2 +0,0 @@
-export { default } from "./HSForms";
-export * from "./HSForms";

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

@@ -1,119 +0,0 @@
-@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

@@ -1,138 +0,0 @@
-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

@@ -1,2 +0,0 @@
-export { default } from "./Header";
-export * from "./Header";

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

@@ -1,44 +0,0 @@
-@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

@@ -1,28 +0,0 @@
-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

@@ -1,2 +0,0 @@
-export { default } from "./HeaderCloseBtn";
-export * from "./HeaderCloseBtn";

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

@@ -1,30 +0,0 @@
-.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;
-  }
-}