@onepercentio/one-ui 0.28.8 → 0.28.9

package/src/components/SectionContainer/SectionContainer.tsx

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/Spacing/Spacing.tsx

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

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

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

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

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

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

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

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

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

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

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

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