@onepercentio/one-ui 0.28.7 → 0.28.9

package/src/components/Table/Table.tsx

@@ -0,0 +1,152 @@
+import React, {
+  createContext,
+  ElementRef,
+  useContext,
+  useMemo,
+  useRef,
+} from "react";
+import { useOneUIContext } from "../../context/OneUIProvider";
+import Button from "../Button";
+import Spacing from "../Spacing";
+import UncontrolledTransition from "../UncontrolledTransition";
+import Styles from "./Table.module.scss";
+
+export type TableProps<I extends any> = {
+  className?: string;
+  heading: {
+    [K in keyof I]?: string;
+  };
+  order: (keyof I)[];
+  items: (I & { className?: string })[];
+  paginable?: {
+    currentPage: number;
+    totalItems: number;
+    togglePage: (page: number) => void;
+  };
+};
+
+/**
+ * A simple table layout
+ **/
+export default function Table<I extends any>({
+  paginable,
+  heading,
+  order,
+  items,
+  className = "",
+}: TableProps<I>) {
+  const transitionRef =
+    useRef<ElementRef<typeof UncontrolledTransition> | HTMLDivElement>(null);
+  const {
+    controls: {
+      NextPage = ({ disabled }) => (
+        <Button disabled={disabled} variant="filled">
+          {">"}
+        </Button>
+      ),
+      PrevPage = ({ disabled }) => (
+        <Button disabled={disabled} variant="filled">
+          {"<"}
+        </Button>
+      ),
+    },
+  } = useOneUIContext().component.table;
+
+  const { items: itemsToShow, pages } = useMemo(() => {
+    if (paginable) {
+      const numPages = Math.ceil(paginable.totalItems / 5);
+
+      return {
+        items: items.slice(
+          (paginable.currentPage - 1) * 5,
+          (paginable.currentPage - 1) * 5 + 5
+        ),
+        pages: numPages,
+      };
+    }
+    return {
+      items: items,
+    };
+  }, [items, paginable?.currentPage, paginable?.totalItems]);
+
+  const Wrapper = paginable ? UncontrolledTransition : "div";
+
+  return (
+    <>
+      <TableContext.Provider
+        value={{
+          itemsToShow,
+          keys: order,
+          heading,
+        }}
+      >
+        <Wrapper
+          className={Styles.transitionContainer}
+          ref={transitionRef as any}
+        >
+          <TableComp key={paginable?.currentPage} className={className} />
+        </Wrapper>
+      </TableContext.Provider>
+      {paginable && paginable.totalItems > 5 ? (
+        <>
+          <Spacing size="small" />
+          <div className={Styles.footer} data-testid="controls">
+            <span
+              className={Styles.iterable}
+              onClick={() => {
+                if (!(transitionRef.current instanceof HTMLDivElement))
+                  transitionRef.current!.setOrientation("backward");
+                paginable.togglePage(paginable.currentPage - 1);
+              }}
+            >
+              <PrevPage disabled={paginable.currentPage === 1} />
+            </span>
+            <span
+              className={Styles.paging}
+            >{`${paginable.currentPage}/${pages}`}</span>
+            <span
+              className={Styles.iterable}
+              onClick={() => {
+                if (!(transitionRef.current instanceof HTMLDivElement))
+                  transitionRef.current!.setOrientation("forward");
+                paginable.togglePage(paginable.currentPage + 1);
+              }}
+            >
+              <NextPage disabled={paginable.currentPage === pages} />
+            </span>
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+const TableContext = createContext<{
+  itemsToShow: any[];
+  keys: any[];
+  heading: { [k: string]: string | undefined };
+}>(null as any);
+
+function TableComp({ className }: { className: string }) {
+  const { itemsToShow, keys, heading } = useContext(TableContext);
+  return (
+    <table className={`${Styles.container} ${className}`}>
+      <thead>
+        <tr>
+          {keys.map((key) => (
+            <th key={String(key)}>{heading[key]}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {itemsToShow.map((i, index) => (
+          <tr key={String(index)} className={i.className}>
+            {keys.map((key) => (
+              <td key={String(key)}>{i[key]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/components/Table/index.tsx

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

package/src/components/Tabs/Tabs.module.scss

@@ -0,0 +1,40 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  overflow-x: auto;
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  > div {
+    cursor: pointer;
+    &.selected {
+      font-weight: bold;
+    }
+  }
+  &.FULL {
+    overflow: visible;
+    > div {
+      transition: color 250ms linear;
+      padding: 0.4em 1em;
+      z-index: 1;
+      margin: 0px;
+
+      &.selected {
+        color: var(--tab-selected-color);
+      }
+    }
+    .guide {
+      box-shadow: $elevation;
+      border-radius: 1em / 50%;
+    }
+  }
+}
+
+.guide {
+  height: 0.1em;
+  background-color: var(--tab-guide-color, $digitalBlue);
+  position: absolute;
+  &.enableTransition {
+    transition: left $fast, width $fast, top $fast, height $fast;
+  }
+}

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,104 @@
+import React, { ReactElement, useEffect, useRef } from "react";
+import Styles from "./Tabs.module.scss";
+
+export enum TabType {
+  /** A div that encovers the tab */
+  FULL,
+  /** An underline */
+  UNDERLINE,
+  /** A class is assigned to the selected tab */
+  CLASS,
+}
+
+/**
+ * Show tabs for toggling between options
+ **/
+export default function Tabs<O extends string | number>(
+  props: {
+    options: Readonly<
+      {
+        id: O;
+        label: string | ReactElement;
+      }[]
+    >;
+    selected?: O;
+    onSelect: (option: O) => void;
+    itemClassName?: string;
+    className?: string;
+  } & (
+    | {
+        type?: Exclude<TabType, TabType.CLASS>;
+      }
+    | {
+        type?: Extract<TabType, TabType.CLASS>;
+        selectedClass: string;
+      }
+  )
+) {
+  const {
+    options,
+    selected,
+    onSelect,
+    itemClassName = "",
+    className = "",
+    type = TabType.UNDERLINE,
+  } = props;
+  const selectedRef = useRef<HTMLParagraphElement>(null);
+  const guideRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (props.type === TabType.CLASS) return;
+    const guideStyle = guideRef.current!.style;
+    const currEl = selectedRef.current;
+    guideStyle["opacity"] = currEl ? "1" : guideStyle["opacity"];
+    guideStyle["width"] = currEl ? currEl.clientWidth + "px" : "0px";
+    guideStyle["left"] = currEl
+      ? currEl.offsetLeft + "px"
+      : guideStyle["left"] || "initial";
+    if (type === TabType.FULL) {
+      guideStyle["height"] = currEl ? currEl.clientHeight + "px" : "";
+      guideStyle["top"] = currEl
+        ? currEl.offsetTop + "px"
+        : guideStyle["top"] || "initial";
+    } else {
+      guideStyle["top"] = currEl
+        ? currEl.offsetTop + currEl.clientHeight + "px"
+        : guideStyle["top"] || "initial";
+    }
+  }, [selected]);
+
+  useEffect(() => {
+    if (props.type === TabType.CLASS) return;
+    guideRef.current!.classList.add(Styles.enableTransition);
+  }, []);
+  const tabNativeCls = TabType[type] in Styles ? Styles[TabType[type]] : "";
+  return (
+    <>
+      <div className={`${Styles.container} ${className} ${tabNativeCls}`}>
+        {options.map((o) => (
+          <div
+            ref={selected === o.id ? selectedRef : undefined}
+            onClick={() => onSelect(o.id)}
+            className={`${
+              selected === o.id ? Styles.selected : ""
+            } ${itemClassName} ${
+              props.type === TabType.CLASS && selected === o.id
+                ? props.selectedClass
+                : ""
+            }`}
+            key={o.id}
+            data-testid="tab-option"
+          >
+            {o.label}
+          </div>
+        ))}
+        {TabType.CLASS !== props.type && (
+          <div
+            ref={guideRef}
+            className={Styles.guide}
+            data-testid="tab-guide"
+          />
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/Tabs/index.tsx

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

package/src/components/Text/Text.module.scss

@@ -0,0 +1,81 @@
+@import "../../assets/styles/index.scss";
+
+.title {
+  font-weight: 300;
+  font-size: 22px;
+  line-height: 33px;
+}
+.boldTitle {
+  font-family: $secondaryFontFamily;
+  font-size: 24px;
+  font-weight: bolder;
+  line-height: 26px;
+}
+.boldTitleBig {
+  font-family: $secondaryFontFamily;
+  font-size: 28px;
+  font-weight: bolder;
+  line-height: 33.8px;
+}
+.content {
+  font-size: 16px;
+  line-height: 24px;
+  font-family: $mainFontFamily;
+}
+.icon.description {
+  font-size: 14px;
+  line-height: 21px;
+  color: $darkestGray;
+}
+.text.error,
+.text.caption {
+  font-size: 12px;
+  line-height: 18px;
+}
+.text.error {
+  color: $warningRed;
+}
+.text {
+  margin: 0px;
+  font-family: $mainFontFamily;
+  white-space: pre-wrap;
+  color: $textDefaultColor;
+}
+.highlightTitle {
+  font-family: $secondaryFontFamily;
+  font-size: 24px;
+  font-weight: bolder;
+  line-height: 29px;
+  color: $sunsetPink;
+}
+.subtitle {
+  font-family: $secondaryFontFamily;
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 22px;
+  color: var(--text-default-color, $gray);
+}
+.link {
+  font-family: $mainFontFamily;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+.iteractible {
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.highlight {
+  font-family: $secondaryFontFamily;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: $sunsetPink;
+}
+
+.text[color="primary"] {
+  color: var(--digital-blue);
+}

package/src/components/Text/Text.tsx

@@ -0,0 +1,42 @@
+import React, { ComponentProps, ForwardedRef, forwardRef } from "react";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+import Styles from "./Text.module.scss";
+
+export function _Text(
+  {
+    type,
+    children,
+    className = "",
+    ...otherProps
+  }: React.PropsWithChildren<
+    {
+      className?: string;
+      type: OnepercentUtility.UIElements.TextVariants;
+      color?: OnepercentUtility.UIElements.TextColors;
+    } & Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">
+  >,
+  _ref?: ForwardedRef<HTMLParagraphElement>
+) {
+  const classNameType = useOneUIConfig("component.text.className", {});
+  const tagByType = useOneUIConfig("component.text.htmlTag", {});
+
+  const TagType = tagByType[type] || "p";
+
+  return (
+    <TagType
+      ref={_ref}
+      className={`${Styles.text} ${
+        classNameType[type] || Styles[type]
+      } ${className} ${otherProps.onClick ? Styles.iteractible : ""}`}
+      {...otherProps}
+    >
+      {children}
+    </TagType>
+  );
+}
+
+/**
+ * A component to hold all text variantions
+ **/
+const Text = forwardRef(_Text);
+export default Text;

package/src/components/Text/index.tsx

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

package/src/components/Transition/MasksFactory/DiagonalReveal.tsx

@@ -0,0 +1,47 @@
+import { renderToString } from "react-dom/server";
+import React from "react";
+import { getTime } from "./utils";
+
+export default function DiagonalReveal(el: HTMLDivElement) {
+  const height = el.clientHeight;
+  const width = el.clientWidth;
+  const time = getTime(el);
+  const filterId = `f-${Date.now().toString()}`;
+  const resultSvg = renderToString(
+    <svg xmlns="http://www.w3.org/2000/svg" id={Date.now().toString()}>
+      <defs>
+        <filter id={filterId} x="0" y="0">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
+        </filter>
+      </defs>
+      <rect
+        x="-25"
+        y="-25"
+        width={`${width * 1.5}px`}
+        fill="white"
+        height={`${height * 1.1}px`}
+        filter={`url(#${filterId})`}
+      >
+        <animateTransform
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          values="0 0 0; 25 0 0; 32 0 0;"
+          dur={`${time}ms`}
+        />
+        <animateTransform
+          additive="sum"
+          attributeName="transform"
+          attributeType="XML"
+          type="translate"
+          values={`0 0; 0 ${height * 0.2}; 0 ${height};`}
+          dur={`${time}ms`}
+        />
+      </rect>
+    </svg>
+  );
+
+  return `url('data:image/svg+xml;charset=utf8,${encodeURIComponent(
+    resultSvg
+  )}')`;
+}

package/src/components/Transition/MasksFactory/DiagonalSquareToBalls.tsx

@@ -0,0 +1,78 @@
+import { renderToString } from "react-dom/server";
+import React from "react";
+import buildGrid, { getTime } from "./utils";
+
+/**
+ * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
+ * @param amountOfVerticalSquares The amount of squares vertically to be shown
+ */
+export default function DiagonalSquareToBalls(
+  amountOfVerticalSquares: number = 10
+) {
+  return function (el: HTMLDivElement) {
+    const height = el.clientHeight;
+    const width = el.clientWidth;
+    const _ballsize = height / amountOfVerticalSquares;
+    const maximumBalls = width / _ballsize;
+    const amountOfBalls = Math.floor(maximumBalls);
+
+    const _time = getTime(el);
+    const rndTime = () => _time * 0.25 + _time * 0.75 * 1;
+
+    const resultSvg = renderToString(
+      <svg xmlns="http://www.w3.org/2000/svg" id={Date.now().toString()}>
+        {buildGrid(amountOfVerticalSquares, amountOfBalls, _ballsize).map(
+          ({ ballSize: _ballsize, x: _x, y: _y, column, row }) => {
+            const ratio =
+              (column / amountOfBalls) * (row / amountOfVerticalSquares);
+            const fourthTime = rndTime() * 0.25;
+            const time = fourthTime + ratio * (fourthTime * 3);
+            const padding = 1 * _ballsize;
+            const ballsize = _ballsize - padding;
+
+            const x = _x + padding / 2;
+            const y = _y + padding / 2;
+            return (
+              <rect fill="white" rx={`${ballsize}px`}>
+                <animate
+                  attributeName="rx"
+                  attributeType="XML"
+                  values={`${0}px;${0}px;${_ballsize}px`}
+                  dur={`${time / 2}ms`}
+                />
+                <animate
+                  attributeName="x"
+                  attributeType="XML"
+                  values={`${_x}px;${x}px;${x + ballsize / 2}px`}
+                  dur={`${time}ms`}
+                />
+                <animate
+                  attributeName="y"
+                  attributeType="XML"
+                  values={`${_y}px;${y}px;${y + ballsize / 2}px`}
+                  dur={`${time}ms`}
+                />
+                <animate
+                  attributeName="width"
+                  attributeType="XML"
+                  values={`${_ballsize}px;${ballsize}px;${0}px`}
+                  dur={`${time}ms`}
+                />
+                <animate
+                  attributeName="height"
+                  attributeType="XML"
+                  values={`${_ballsize}px;${ballsize}px;${0}px`}
+                  dur={`${time}ms`}
+                />
+              </rect>
+            );
+          }
+        )}
+      </svg>
+    );
+
+    return `url('data:image/svg+xml;charset=utf8,${encodeURIComponent(
+      resultSvg
+    )}')`;
+  };
+}

package/src/components/Transition/MasksFactory/PhysicsSquares.tsx

@@ -0,0 +1,106 @@
+import Matter from "matter-js";
+import buildGrid from "./utils";
+/**
+ * DO NOT DARE TO USE THIS IF YOU HAVE A MINIMAL RESPECT FOR PERFORMANCE
+ * 
+ * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
+ * @param amountOfVerticalSquares The amount of squares vertically to be shown
+ */
+export default function PhysicsSquares(amountOfVerticalSquares: number = 10) {
+  return function (el: HTMLDivElement) {
+    const height = el.clientHeight;
+    const width = el.clientWidth;
+    const _ballsize = height / amountOfVerticalSquares;
+    const maximumBalls = width / _ballsize;
+    const amountOfBalls = Math.floor(maximumBalls);
+    const gridData = buildGrid(
+      amountOfVerticalSquares,
+      amountOfBalls,
+      _ballsize
+    );
+    const _time = getComputedStyle(el).getPropertyValue(
+      "--animation-speed-transition"
+    );
+    const time = _time.endsWith("ms")
+      ? Number(_time.replace("ms", ""))
+      : Number(_time.replace("s", "")) * 1000;
+    const canvas = document.createElement("canvas");
+    canvas.width = el.clientWidth / 10;
+    canvas.height = el.clientHeight / 10;
+    // module aliases
+    var Engine = Matter.Engine,
+      Render = Matter.Render,
+      Runner = Matter.Runner,
+      Bodies = Matter.Bodies,
+      Composite = Matter.Composite;
+
+    // create an engine
+    var engine = Engine.create();
+
+    // create a renderer
+    var render = Render.create({
+      engine: engine,
+      options: {
+        wireframes: false,
+        background: "black",
+        height: el.clientHeight,
+        width: el.clientWidth,
+      },
+      canvas: canvas,
+      bounds: {
+        min: {
+          x: 0,
+          y: 0,
+        },
+        max: {
+          x: el.clientWidth,
+          y: el.clientHeight,
+        },
+      },
+    });
+    var ground = Bodies.rectangle(0, el.clientHeight, el.clientWidth * 2, 10, {
+      render: {
+        fillStyle: "black",
+      },
+      angle: 0.1,
+      isStatic: true,
+    });
+
+    const gridBodies = gridData.map((a) =>
+      Bodies.circle(
+        a.x + a.ballSize / 2 + (Math.random() * a.ballSize) / 2,
+        a.y + a.ballSize / 2 + (Math.random() * a.ballSize) / 2,
+        a.ballSize / 4 + (Math.random() * a.ballSize) / 4,
+        {
+          density: 0.1,
+          render: {
+            fillStyle: "black",
+          },
+        }
+      )
+    );
+
+    // add all of the bodies to the world
+    Composite.add(engine.world, [...gridBodies, ground]);
+
+    // run the renderer
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+
+    // run the engine
+    Runner.run(runner, engine);
+
+    const i = setInterval(() => {
+      (
+        el.firstElementChild! as HTMLDivElement
+      ).style.webkitMaskImage = `url('${canvas!.toDataURL("base64")}')`;
+    }, 1000 / 60);
+    setTimeout(() => {
+      clearInterval(i);
+      Runner.stop(runner);
+    }, time);
+    return ``;
+  };
+}