Merge pull request #2408 from pyth-network/cprussin/ui-10-make-app-re…

…sponsive-handle-small-screen-sizes

feat(insights): make app responsive

.github/workflows/ci-turbo-build.yml

@@ -15,6 +15,8 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
+      - name: Install libusb
+        run: sudo apt install -y libusb-1.0-0-dev
       - uses: actions/checkout@v4
       - uses: Swatinem/rust-cache@v2
       - uses: actions/setup-node@v4

.github/workflows/ci-turbo-test.yml

@@ -15,6 +15,8 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
+      - name: Install libusb
+        run: sudo apt install -y libusb-1.0-0-dev
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:

.github/workflows/publish-js.yml

@@ -9,6 +9,8 @@ jobs:
     name: Publish Javascript Packages to NPM
     runs-on: ubuntu-latest
     steps:
+      - name: Install libusb
+        run: sudo apt install -y libusb-1.0-0-dev
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v4
         with:

apps/insights/src/components/Cards/index.module.scss

@@ -0,0 +1,40 @@
+@use "@pythnetwork/component-library/theme";
+
+.cards {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  gap: theme.spacing(6);
+  overflow-x: auto;
+  margin-left: calc(-1 * #{theme.$max-width-padding});
+  margin-right: calc(-1 * #{theme.$max-width-padding});
+  padding: theme.spacing(4) theme.$max-width-padding theme.spacing(4)
+    theme.$max-width-padding;
+  scroll-snap-type: x mandatory;
+  scroll-padding-inline: theme.$max-width-padding;
+
+  @include theme.breakpoint("sm") {
+    padding-top: theme.spacing(6);
+    padding-bottom: theme.spacing(6);
+  }
+
+  & > * {
+    flex: none;
+    width: 70vw;
+    max-width: theme.spacing(70);
+    scroll-snap-align: start;
+
+    @include theme.breakpoint("sm") {
+      flex: 1 0 theme.spacing(70);
+      width: theme.spacing(70);
+      max-width: unset;
+    }
+  }
+
+  .publishersChart,
+  .priceFeedsChart {
+    & svg {
+      cursor: pointer;
+    }
+  }
+}

apps/insights/src/components/Cards/index.tsx

@@ -0,0 +1,8 @@
+import clsx from "clsx";
+import type { ComponentProps } from "react";
+
+import styles from "./index.module.scss";
+
+export const Cards = ({ className, ...props }: ComponentProps<"section">) => (
+  <section className={clsx(className, styles.cards)} {...props} />
+);

apps/insights/src/components/EntityList/index.module.scss

@@ -0,0 +1,84 @@
+@use "@pythnetwork/component-library/theme";
+
+.entityList {
+  background: theme.color("background", "primary");
+  border-radius: theme.border-radius("xl");
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  .entityItem {
+    padding: theme.spacing(3) theme.spacing(4);
+    border-bottom: 1px solid theme.color("background", "secondary");
+    outline: theme.spacing(0.5) solid transparent;
+    outline-offset: -#{theme.spacing(0.5)};
+    transition:
+      outline-color 100ms linear,
+      background-color 100ms linear;
+    -webkit-tap-highlight-color: transparent;
+
+    &[data-focus-visible] {
+      outline: theme.spacing(0.5) solid theme.color("focus");
+    }
+
+    &[data-href] {
+      cursor: pointer;
+    }
+
+    &[data-hovered] {
+      background-color: theme.color("button", "outline", "background", "hover");
+    }
+
+    &[data-pressed] {
+      background-color: theme.color(
+        "button",
+        "outline",
+        "background",
+        "active"
+      );
+    }
+
+    &:first-child {
+      border-top-left-radius: theme.border-radius("xl");
+      border-top-right-radius: theme.border-radius("xl");
+    }
+
+    &:last-child {
+      border-bottom-left-radius: theme.border-radius("xl");
+      border-bottom-right-radius: theme.border-radius("xl");
+      border-bottom: none;
+    }
+
+    .itemHeader,
+    .itemDetailsItem {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .itemDetails {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: theme.spacing(2) theme.spacing(18);
+
+      @include theme.breakpoint("sm") {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .itemDetailsItem {
+        height: theme.spacing(5);
+
+        dt {
+          @include theme.text("sm", "normal");
+
+          color: theme.color("muted");
+        }
+
+        dd {
+          margin: 0;
+        }
+      }
+    }
+  }
+}

apps/insights/src/components/EntityList/index.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Skeleton } from "@pythnetwork/component-library/Skeleton";
+import {
+  GridList,
+  GridListItem,
+} from "@pythnetwork/component-library/unstyled/GridList";
+import clsx from "clsx";
+import type { ComponentProps, ReactNode } from "react";
+
+import styles from "./index.module.scss";
+
+type Props<T extends string> = ComponentProps<typeof GridList<RowConfig<T>>> & {
+  headerLoadingSkeleton?: ReactNode | undefined;
+  label: string;
+  fields: ({
+    id: T;
+    name: ReactNode;
+  } & (
+    | { loadingSkeleton?: ReactNode | undefined }
+    | { loadingSkeletonWidth?: number | undefined }
+  ))[];
+} & (
+    | {
+        isLoading: true;
+        rows?: RowConfig<T>[] | undefined;
+      }
+    | {
+        isLoading?: false | undefined;
+        rows: RowConfig<T>[];
+      }
+  );
+
+type RowConfig<T extends string> = {
+  id: string | number;
+  data: Record<T, ReactNode>;
+  header: ReactNode;
+  href?: string;
+  textValue: string;
+};
+
+export const EntityList = <T extends string>({
+  fields,
+  isLoading,
+  rows,
+  headerLoadingSkeleton,
+  className,
+  label,
+  ...props
+}: Props<T>) => (
+  <GridList
+    className={clsx(styles.entityList, className)}
+    items={isLoading ? [] : rows}
+    aria-label={label}
+    {...props}
+  >
+    {isLoading ? (
+      <GridListItem className={styles.entityItem ?? ""}>
+        <div className={styles.itemHeader}>{headerLoadingSkeleton}</div>
+        <dl className={styles.itemDetails}>
+          {fields.map((field) => (
+            <div key={field.id} className={styles.itemDetailsItem}>
+              <dt>{field.name}</dt>
+              <dd>
+                {"loadingSkeleton" in field ? (
+                  field.loadingSkeleton
+                ) : (
+                  <Skeleton
+                    width={
+                      "loadingSkeletonWidth" in field
+                        ? field.loadingSkeletonWidth
+                        : 20
+                    }
+                  />
+                )}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </GridListItem>
+    ) : (
+      ({ data, header, ...props }) => (
+        <GridListItem className={styles.entityItem ?? ""} {...props}>
+          <div className={styles.itemHeader}>{header}</div>
+          <dl className={styles.itemDetails}>
+            {fields.map((field) => (
+              <div key={field.id} className={styles.itemDetailsItem}>
+                <dt>{field.name}</dt>
+                <dd>{data[field.id]}</dd>
+              </div>
+            ))}
+          </dl>
+        </GridListItem>
+      )
+    )}
+  </GridList>
+);

apps/insights/src/components/Error/index.module.scss

@@ -1,19 +1,35 @@
 @use "@pythnetwork/component-library/theme";
 
 .error {
-  @include theme.max-width;
-
   display: flex;
   flex-flow: column nowrap;
   gap: theme.spacing(12);
   align-items: center;
   text-align: center;
-  padding: theme.spacing(36) theme.spacing(0);
+  padding-top: theme.spacing(8);
+  padding-bottom: theme.spacing(8);
+
+  @include theme.max-width;
+
+  @include theme.breakpoint("sm") {
+    padding-top: theme.spacing(18);
+    padding-bottom: theme.spacing(18);
+  }
+
+  @include theme.breakpoint("lg") {
+    padding-top: theme.spacing(36);
+    padding-bottom: theme.spacing(36);
+  }
 
   .errorIcon {
-    font-size: theme.spacing(20);
-    height: theme.spacing(20);
+    font-size: theme.spacing(14);
+    height: theme.spacing(14);
     color: theme.color("states", "error", "color");
+
+    @include theme.breakpoint("sm") {
+      font-size: theme.spacing(20);
+      height: theme.spacing(20);
+    }
   }
 
   .text {

apps/insights/src/components/Explain/index.module.scss

@@ -1,9 +1,17 @@
 @use "@pythnetwork/component-library/theme";
 
-.trigger {
-  @each $size, $values in theme.$button-sizes {
-    &[data-size="#{$size}"] {
-      margin: -#{theme.map-get-strict($values, "padding")};
+.explain {
+  display: none;
+
+  @include theme.breakpoint("sm") {
+    display: grid;
+  }
+
+  .trigger {
+    @each $size, $values in theme.$button-sizes {
+      &[data-size="#{$size}"] {
+        margin: -#{theme.map-get-strict($values, "padding")};
+      }
     }
   }
 }

apps/insights/src/components/Explain/index.tsx

@@ -13,23 +13,25 @@ type Props = {
 };
 
 export const Explain = ({ size, title, children }: Props) => (
-  <AlertTrigger>
-    <Button
-      className={styles.trigger ?? ""}
-      variant="ghost"
-      size={size}
-      beforeIcon={(props) => <Info weight="fill" {...props} />}
-      rounded
-      hideText
-    >
-      Explain {title}
-    </Button>
-    <Alert
-      title={title}
-      icon={<Lightbulb />}
-      bodyClassName={styles.description}
-    >
-      {children}
-    </Alert>
-  </AlertTrigger>
+  <div className={styles.explain}>
+    <AlertTrigger>
+      <Button
+        className={styles.trigger ?? ""}
+        variant="ghost"
+        size={size}
+        beforeIcon={(props) => <Info weight="fill" {...props} />}
+        rounded
+        hideText
+      >
+        Explain {title}
+      </Button>
+      <Alert
+        title={title}
+        icon={<Lightbulb />}
+        bodyClassName={styles.description}
+      >
+        {children}
+      </Alert>
+    </AlertTrigger>
+  </div>
 );

apps/insights/src/components/NoResults/index.tsx

@@ -16,7 +16,7 @@ type Props = {
     }
 );
 
-type Variant = "success" | "error" | "warning" | "info" | "data";
+export type Variant = "success" | "error" | "warning" | "info" | "data";
 
 export const NoResults = ({ onClearSearch, ...props }: Props) => (
   <div