New table design

frontend-components/tables/package.json

@@ -5,23 +5,31 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
+    "build_tsc": "tsc && vite build",
     "deploy": "npm run build && mv dist/index.html ../../openbb_terminal/core/plots/table.html",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.3",
+    "@radix-ui/react-dropdown-menu": "^2.0.4",
+    "@radix-ui/react-icons": "^1.2.0",
+    "@radix-ui/react-radio-group": "^1.1.2",
+    "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-toast": "^1.1.3",
     "@tanstack/match-sorter-utils": "^8.7.6",
     "@tanstack/react-table": "^8.7.9",
     "dom-to-image": "^2.6.0",
     "plotly.js": "^2.18.2",
-    "react": "^18.2.0",
+    "react": "^17.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^17.0.0",
     "react-plotly.js": "^2.6.0",
     "react-table": "^7.8.0",
     "react-virtual": "^2.10.4",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "xss": "^1.0.14"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",

frontend-components/tables/src/components/Icons/Close.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+const CloseIcon = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    {...props}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 18L18 6M6 6l12 12"
+    />
+  </svg>
+);
+
+export default CloseIcon;

frontend-components/tables/src/components/Icons/CloseCircle.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+const CloseCircleIcon = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    viewBox="0 0 18 18"
+    width={18}
+    height={18}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M9 16.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15ZM11.25 6.75l-4.5 4.5M6.75 6.75l4.5 4.5"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default CloseCircleIcon;

frontend-components/tables/src/components/Icons/Info.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+const InfoIcon = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    width={24}
+    height={24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10ZM12 16v-4M12 8h.01"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default InfoIcon;

frontend-components/tables/src/components/Icons/Success.tsx

@@ -0,0 +1,39 @@
+import type { SVGProps } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+const SuccessIcon = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    width={18}
+    height={18}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M16.5 8.31V9a7.5 7.5 0 1 1-4.447-6.855"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.5 3 9 10.508l-2.25-2.25"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SuccessIcon;

frontend-components/tables/src/components/Icons/Warning.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+const WarningIcon = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    viewBox="0 0 18 18"
+    width={18}
+    height={18}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M7.718 2.895 1.366 13.5a1.5 1.5 0 0 0 1.282 2.25h12.705a1.5 1.5 0 0 0 1.283-2.25L10.283 2.895a1.5 1.5 0 0 0-2.565 0v0ZM9 6.75v3M9 12.75h.008"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default WarningIcon;

frontend-components/tables/src/components/Select.tsx

@@ -0,0 +1,116 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@radix-ui/react-icons";
+import { forwardRef } from "react";
+import clsx from "clsx";
+
+const Select = ({
+  value,
+  onChange,
+  label = "Select",
+  placeholder = "Select a fruit…",
+  groups,
+  labelType = "col",
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+  placeholder?: string;
+  labelType?: "col" | "row";
+  groups: {
+    label: string;
+    items: {
+      label: string;
+      value: string | number;
+      disabled?: boolean;
+    }[];
+  }[];
+}) => {
+  const onlyOneGroup = groups.length === 1;
+  return (
+    <SelectPrimitive.Root value={value} onValueChange={onChange}>
+      <SelectPrimitive.Group
+        className={clsx("flex gap-1 text-sm", {
+          "flex-row items-center gap-2": labelType === "row",
+          "flex-col": labelType === "col",
+        })}
+      >
+        <SelectPrimitive.Label className="whitespace-nowrap">
+          {label}
+        </SelectPrimitive.Label>
+        <SelectPrimitive.Trigger
+          className="justify-between bg-grey-900 whitespace-nowrap h-[36px] border-[1.5px] border-grey-700 rounded p-3 inline-flex items-center leading-none gap-[5px] shadow-[0_2px_10px] shadow-black/10 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-white outline-none"
+          aria-label={label}
+        >
+          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Icon>
+            <ChevronDownIcon />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+      </SelectPrimitive.Group>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content className="z-50 bg-grey-900/80 backdrop-filter backdrop-blur overflow-hidden border-[1.5px] border-grey-700 rounded p-3 shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]">
+          <SelectPrimitive.ScrollUpButton className="flex items-center justify-center h-[25px] cursor-default">
+            <ChevronUpIcon />
+          </SelectPrimitive.ScrollUpButton>
+          <SelectPrimitive.Viewport className="p-[5px]">
+            {onlyOneGroup ? (
+              <SelectPrimitive.Group>
+                {groups[0].items.map((item) => (
+                  <SelectItem value={item.value} disabled={item.disabled}>
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectPrimitive.Group>
+            ) : (
+              groups.map((group, idx) => (
+                <SelectPrimitive.Group key={group.label}>
+                  <SelectPrimitive.Label className="text-xs leading-[25px]">
+                    {group.label}
+                  </SelectPrimitive.Label>
+                  {group.items.map((item) => (
+                    <SelectItem
+                      key={item.value}
+                      value={item.value}
+                      disabled={item.disabled}
+                    >
+                      {item.label}
+                    </SelectItem>
+                  ))}
+                </SelectPrimitive.Group>
+              ))
+            )}
+          </SelectPrimitive.Viewport>
+          <SelectPrimitive.ScrollDownButton className="flex items-center justify-center h-[25px] cursor-default">
+            <ChevronDownIcon />
+          </SelectPrimitive.ScrollDownButton>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+};
+
+const SelectItem = forwardRef(
+  ({ children, className, ...props }, forwardedRef) => {
+    return (
+      <SelectPrimitive.Item
+        className={clsx(
+          "text-[13px] leading-none rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-grey-400 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grey-600 data-[highlighted]:text-white",
+          className
+        )}
+        {...props}
+        ref={forwardedRef}
+      >
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        <SelectPrimitive.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
+          <CheckIcon />
+        </SelectPrimitive.ItemIndicator>
+      </SelectPrimitive.Item>
+    );
+  }
+);
+
+export default Select;