@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/Table/Table.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,106 +0,0 @@
-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 ``;
-  };
-}