@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/SectionContainer/SectionContainer.tsx

@@ -1,49 +0,0 @@
-import React, {
-  createRef,
-  ForwardedRef,
-  forwardRef,
-  JSX,
-  PropsWithChildren,
-  RefObject,
-} from "react";
-import Styles from "./SectionContainer.module.scss";
-
-export function createId(...args: string[]): string {
-  return args.join("-");
-}
-
-type Props<S extends string> = PropsWithChildren<{
-  decoration?: "dark" | "light";
-  section?: S;
-  className?: string;
-  onClick?: JSX.IntrinsicElements["div"]["onClick"];
-}>;
-function _SectionContainer<S extends string = OnepercentUtility.PageSections>(
-  { children, section, className = "", decoration, onClick }: Props<S>,
-  ref: ForwardedRef<HTMLDivElement>
-) {
-  return (
-    <div
-      ref={ref}
-      onClick={onClick}
-      className={`${Styles.root} ${className}`}
-      id={section}
-    >
-      <div
-        className={`${Styles.content} ${decoration ? Styles.decorated : ""}`}
-      >
-        {children}
-        {decoration && (
-          <div className={`${Styles.decoration} ${Styles[decoration]}`} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * This component wraps a section and limits the width of it's content as well as requiring an id to reference to this section
- **/
-const SectionContainer =
-  forwardRef<HTMLDivElement, Props<string>>(_SectionContainer);
-export default SectionContainer;

package/src/components/SectionContainer/index.tsx

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

package/src/components/Select/Select.module.scss

@@ -1,58 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.items > * {
-  cursor: pointer;
-  background: $mainBackgroundColor;
-  padding: 12px 32px;
-  &:not(:last-child) {
-    margin-bottom: 8px;
-  }
-  margin-left: 4px;
-  margin-right: 4px;
-  text-align: left;
-  border-radius: 4px;
-  font-size: 14px;
-  &.selected {
-    background-color: $lightGray;
-  }
-}
-.empty {
-  opacity: 0.3;
-}
-.input {
-  cursor: pointer;
-  input {
-    transition: opacity $fast;
-    padding-right: 30px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    pointer-events: none;
-  }
-}
-.indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform $fast;
-  min-height: inherit;
-  transform: rotateX(0deg);
-}
-.open {
-  transform: rotateX(180deg);
-}
-.optionsContainer {
-  margin: 0px 8px;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
-}
-.searchInput {
-  position: sticky;
-  top: 0px;
-  > * > span {
-    margin-right: 12px;
-    display: flex;
-    align-items: center;
-  }
-  input {
-    margin-bottom: 0px !important;
-  }
-}

package/src/components/Select/Select.tsx

@@ -1,192 +0,0 @@
-import React, {
-  ComponentProps,
-  DetailedHTMLProps,
-  ElementRef,
-  HTMLAttributes,
-  ReactElement,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import Collapsable from "../Collapsable";
-import Text from "../Text";
-import Styles from "./Select.module.scss";
-import Input from "../Input";
-import Loader from "../Loader";
-import {
-  OneUIContextSpecs,
-  useOneUIConfig,
-  useOneUIContext,
-} from "../../context/OneUIProvider";
-import {
-  AnchoredTooltipAlignment,
-  AnchoredTooltipAnchor,
-} from "../AnchoredTooltip/AnchoredTooltip";
-
-export type SelectItem = (
-  | {
-      label: string;
-      value: string;
-    }
-  | {
-      label: ReactElement;
-      labelStr: string;
-      value: string;
-    }
-) &
-  Omit<
-    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLElement>,
-    "ref" | "color"
-  >;
-
-/**
- * A dropdown select
- **/
-function Select<I extends SelectItem>({
-  items,
-  selected,
-  label,
-  onClick,
-  loading,
-  rootClassName = "",
-  dropdownClassName: _drop = "",
-  alignTo = AnchoredTooltipAlignment.CENTER,
-  filter,
-  ...otherProps
-}: {
-  loading?: boolean;
-  items: Readonly<I[]>;
-  onClick: (i: I) => void;
-  rootClassName?: string;
-  dropdownClassName?: string;
-  alignTo?: AnchoredTooltipAlignment;
-  filter?: (item: I, term: string) => boolean;
-} & (
-  | {
-      selected?: I["value"];
-      label: string;
-    }
-  | {
-      selected: I["value"];
-      label?: string;
-    }
-) &
-  Omit<ComponentProps<typeof Input>, "selected" | "onClick">) {
-  const { StateIndicator } = useOneUIContext().component.select;
-  const collapsableRef = useRef<ElementRef<typeof Collapsable>>(null);
-
-  const _selected = useMemo(() => {
-    return items.find((a) => a.value === selected);
-  }, [selected, items]);
-
-  const [open, setOpen] = useState(false);
-  const [filterTerm, setFilterTerm] = useState("");
-
-  const filteredItems = useMemo(() => {
-    if (filter && filterTerm)
-      return items.filter((item) => filter(item, filterTerm));
-    else return items;
-  }, [filterTerm, items]);
-
-  useEffect(() => {
-    collapsableRef.current!.redimension();
-  }, [filteredItems.length]);
-
-  useLayoutEffect(() => {
-    if (open) setFilterTerm("");
-  }, [open]);
-
-  const selectClasses = _drop
-    ? ({
-        dropdown: _drop,
-      } as NonNullable<OneUIContextSpecs["component"]["select"]["className"]>)
-    : useOneUIConfig("component.select.className", {});
-
-  useEffect(() => {
-    if (open) {
-      const close = () => {
-        setOpen(false);
-      };
-      window.addEventListener("click", close);
-      return () => window.removeEventListener("click", close);
-    }
-  }, [open]);
-
-  return (
-    <Collapsable
-      title={
-        <Input
-          {...otherProps}
-          className={`${Styles.input} ${selectClasses.input} ${
-            !items.length ? Styles.empty : ""
-          }`}
-          value={
-            _selected
-              ? "labelStr" in _selected
-                ? _selected.labelStr
-                : _selected.label
-              : label || ""
-          }
-          disabled
-          Icon={
-            <div className={`${Styles.indicator}`}>
-              {loading ? <Loader /> : <StateIndicator open={!!open} />}
-            </div>
-          }
-        />
-      }
-      id={undefined}
-      mode="float"
-      open={open}
-      onToggleOpen={(open) => {
-        if (items.length) setOpen(open);
-      }}
-      className={`${otherProps.disabled ? "disabled" : ""} ${rootClassName}`}
-      contentClassName={`${Styles.optionsContainer} ${selectClasses.dropdown}`}
-      alignTo={alignTo}
-      ref={collapsableRef}
-      anchorTo={AnchoredTooltipAnchor.BOTTOM}
-    >
-      <div
-        className={Styles.items}
-        onClick={(e) => {
-          e.stopPropagation();
-          setOpen(false);
-        }}
-      >
-        {filter && (
-          <div className={Styles.searchInput}>
-            <Input
-              onChange={({ target: { value } }) => setFilterTerm(value)}
-              decoration={<span>🔎&nbsp;</span>}
-              containerProps={{
-                onClick: (e) => e.stopPropagation(),
-              }}
-              border={false}
-              value={filterTerm}
-            />
-          </div>
-        )}
-        {filteredItems.map((i) => (
-          <Text
-            type="caption"
-            key={i.value}
-            className={`${
-              i === _selected
-                ? `${Styles.selected} ${selectClasses.selectedItem}`
-                : ""
-            } ${selectClasses.item || ""}`}
-            onClick={() => onClick(i)}
-            {...i}
-          >
-            {i.label}
-          </Text>
-        ))}
-      </div>
-    </Collapsable>
-  );
-}
-
-export default Select;

package/src/components/Select/index.tsx

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

package/src/components/Skeleton/Skeleton.module.scss

@@ -1,21 +0,0 @@
-@import "../../assets/styles";
-
-.root {
-  background: linear-gradient(10deg, #0000 10%, #0006, #0000 80%);
-  background-size: var(--biggest-unit) var(--biggest-unit);
-  animation-name: moving;
-  animation-duration: $slow;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  border-radius: 0.4em;
-  display: inline-block;
-}
-
-@keyframes moving {
-  0% {
-    background-position: 0em 0em;
-  }
-  100% {
-    background-position: 0em var(--biggest-unit);
-  }
-}

package/src/components/Skeleton/Skeleton.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import Styles from "./Skeleton.module.scss";
-
-/**
- * A skeleton element used to display a content that is loading
- *
- * Usually, it is used for paragraph elements, with a specific size
- * So it's width and height is translated to em units
- **/
-export default function Skeleton({
-  width,
-  height = 1,
-}: {
-  width: number;
-  height?: number;
-}) {
-  return (
-    <span
-      className={Styles.root}
-      style={
-        {
-          "--biggest-unit": `${Math.max(width, height) * 2}em`,
-          width: `${width}em`,
-          height: `${height}em`,
-        } as any
-      }
-    />
-  );
-}

package/src/components/Skeleton/index.tsx

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

package/src/components/Spacing/Spacing.module.scss

@@ -1,13 +0,0 @@
-.spacing_large {
-  height: 33px;
-}
-.spacing_small {
-  height: 15px;
-}
-.spacing_stretch {
-  flex: 1;
-}
-
-.spacing {
-  display: block;
-}

package/src/components/Spacing/Spacing.tsx

@@ -1,24 +0,0 @@
-import React, { useMemo } from "react";
-import Styles from "./Spacing.module.scss";
-import { useOneUIConfig } from "../../context/OneUIProvider";
-
-/**
- * A component to inject some spacing between component when required
- **/
-export default function Spacing({
-  size,
-}: {
-  size: OnepercentUtility.UIElements.SpacingVariants | "stretch";
-}) {
-  const spacingClasses = useOneUIConfig("component.spacing.variants", {
-    large: Styles.spacing_large,
-    small: Styles.spacing_small,
-  });
-
-  const cls = useMemo(
-    () => (size === "stretch" ? Styles.spacing_stretch : spacingClasses[size]),
-    [size]
-  );
-
-  return <div className={`${Styles.spacing} ${cls}`} />;
-}

package/src/components/Spacing/index.tsx

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

package/src/components/StaticScroller/StaticScroller.module.scss

@@ -1,14 +0,0 @@
-.root {
-  display: flex;
-  overflow: auto;
-  > * {
-    flex-shrink: 0;
-  }
-  > :first-child {
-    position: sticky;
-    left: 0;
-  }
-  > :not(:first-child) {
-    z-index: 1;
-  }
-}

package/src/components/StaticScroller/StaticScroller.tsx

@@ -1,83 +0,0 @@
-import React, {
-  DetailedHTMLProps,
-  ForwardedRef,
-  HTMLAttributes,
-  MutableRefObject,
-  PropsWithChildren,
-  createRef,
-  forwardRef,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from "react";
-import { debounce, throttle } from "lodash";
-import Styles from "./StaticScroller.module.scss";
-
-function _StaticScroller(
-  {
-    children,
-    ...props
-  }: PropsWithChildren<
-    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-  >,
-  ref: ForwardedRef<HTMLDivElement>
-) {
-  const rootRef = useMemo(() => {
-    return (
-      (ref as MutableRefObject<HTMLDivElement>) || createRef<HTMLDivElement>()
-    );
-  }, [ref]);
-
-  useLayoutEffect(() => {
-    const el = rootRef.current!;
-    let latestScroll: number | undefined;
-    const child = el.children[0] as HTMLDivElement;
-
-    const checkIfNeedsToHide = debounce(() => {
-      const direction = el.scrollLeft > latestScroll! ? "in" : "out";
-      if (el.scrollLeft < child.clientWidth) {
-        el.scrollTo({
-          left: direction === "in" ? child.clientWidth : 0,
-          behavior: "smooth",
-        });
-      }
-      latestScroll = undefined;
-    }, 500);
-    const throtleSetLast = throttle(
-      (last: number) => {
-        latestScroll = last;
-      },
-      1000 / 5,
-      {
-        leading: true,
-        trailing: false,
-      }
-    );
-    const onScroll = () => {
-      const min = Math.min(el.scrollLeft, child.clientWidth);
-      const opacity = String(1 - min / child.clientWidth);
-      child.style.opacity = opacity;
-      checkIfNeedsToHide();
-      throtleSetLast(el.scrollLeft);
-    };
-    el.addEventListener("scroll", onScroll, {
-      passive: true,
-    });
-
-    return () => {
-      el.removeEventListener("scroll", onScroll);
-    };
-  }, []);
-
-  return (
-    <div className={Styles.root} {...props} ref={rootRef}>
-      {children}
-    </div>
-  );
-}
-
-/**
- * Mantains a static content at the start of the container and when scrolled animates it's concealment
- **/
-const StaticScroller = forwardRef(_StaticScroller);
-export default StaticScroller;

package/src/components/StaticScroller/index.tsx

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

package/src/components/Switch/Switch.module.scss

@@ -1,43 +0,0 @@
-@use 'sass:math';
-@import "../../assets/styles/variables.scss";
-
-.root {
-  box-sizing: border-box;
-  $height: 1.4em;
-  height: $height;
-  width: 2em + 0.4em;
-  padding: 0.1em;
-  border-radius: math.div($height, 1);
-  border: 0.1em solid $digitalBlue;
-  background-color: white;
-  transition: background-color $fast linear;
-  cursor: pointer;
-
-  input {
-    max-width: 0px;
-    max-height: 0px;
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
-
-  .toggler {
-    height: 1em;
-    width: 1em;
-    background-color: $digitalBlue;
-    border-radius: math.div(1em, 2);
-    transition: transform $fast linear;
-  }
-
-  &.disabled {
-    opacity: 0.4;
-    cursor: initial;
-  }
-  &.on {
-    background-color: $digitalBlue;
-    .toggler {
-      transform: translateX(1em);
-      background-color: white;
-    }
-  }
-}

package/src/components/Switch/Switch.tsx

@@ -1,41 +0,0 @@
-import React, {
-  ComponentProps,
-  DetailedHTMLProps,
-  HTMLAttributes,
-} from "react";
-import Styles from "./Switch.module.scss";
-
-/**
- * Switchs between states
- **/
-export default function Switch({
-  enabled,
-  onToggle,
-  size,
-  disabled,
-  ...props
-}: {
-  enabled: boolean;
-  onToggle: (newState: boolean) => void;
-  size: number;
-  disabled?: boolean;
-} & Omit<
-  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
-  "ref"
->) {
-  return (
-    <>
-      <div
-        style={{ fontSize: `${size}px` }}
-        className={`${Styles.root} ${enabled ? Styles.on : ""} ${
-          disabled ? Styles.disabled : ""
-        }`}
-        onClick={() => onToggle(!enabled)}
-        {...props}
-      >
-        <div className={Styles.toggler} />
-        <input checked={enabled} type="checkbox" />
-      </div>
-    </>
-  );
-}

package/src/components/Switch/index.tsx

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

package/src/components/Table/Table.module.scss

@@ -1,76 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.transitionContainer {
-  min-height: auto;
-  max-width: 100vw;
-  overflow: auto;
-}
-
-.container {
-  font-family: $mainFontFamily;
-  padding: 0px 4px;
-  width: 100%;
-  position: relative;
-  border-spacing: 0px;
-  th {
-    font-family: 14px;
-    line-height: 28px;
-    text-align: start;
-    font-weight: normal;
-  }
-  td,
-  th {
-    padding: 20px;
-  }
-  tbody tr {
-    background-color: $tableRowBgColor;
-    &:first-child td {
-      &:first-child {
-        border-top-left-radius: 8px;
-      }
-      &:last-child {
-        border-top-right-radius: 8px;
-      }
-      border-top: 1px solid $tableRowBorderColor;
-    }
-    &:last-child td {
-      &:first-child {
-        border-bottom-left-radius: 8px;
-      }
-      &:last-child {
-        border-bottom-right-radius: 8px;
-      }
-    }
-    td {
-      border-bottom: 1px solid $tableRowBorderColor;
-      &:first-child {
-        border-left: 1px solid $tableRowBorderColor;
-      }
-      &:last-child {
-        border-right: 1px solid $tableRowBorderColor;
-      }
-    }
-  }
-}
-.footer {
-  padding: 0px 4px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  --button-min-width: auto;
-  --button-min-height: auto;
-
-  .paging {
-    font-family: $mainFontFamily;
-    color: $digitalBlue;
-    margin: 0px 12px;
-    font-size: 18px;
-  }
-}
-
-.iterable {
-  @include iteractibleElement;
-  &:first-child {
-    margin-left: auto;
-  }
-}