@kylincloud/flamegraph 0.35.6

package/src/shims/Button.module.scss

@@ -0,0 +1,129 @@
+$border: 1px solid var(--ps-ui-border);
+$border-radius: 4px;
+
+.button {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  border: $border;
+  border-radius: $border-radius;
+
+  &[type='button'],
+  &[type='reset'],
+  &[type='submit'] {
+    -webkit-appearance: button;
+  }
+}
+
+.noIcon {
+  min-width: 48px;
+}
+
+.noBox {
+  border: none;
+  border-radius: none;
+  background: inherit !important;
+}
+
+.customIcon svg {
+  width: 1rem;
+  margin-right: 5px;
+  vertical-align: -0.125em;
+}
+
+.iconWithText {
+  // icon is on the left
+  // some space between the icon and text
+  margin-right: 5px;
+}
+
+.default {
+  background: var(--ps-ui-element-bg-primary);
+
+  &:hover:not(:disabled) {
+    background-color: var(--ps-ui-element-bg-highlight);
+  }
+
+  &:disabled {
+    color: var(--ps-disabled-button-text);
+    pointer-events: none;
+  }
+}
+
+.primary {
+  border-color: transparent;
+  color: var(--ps-button-switch-text) !important;
+  background-color: var(--ps-button-switch-bg);
+
+  &:hover {
+    background-color: var(--ps-button-switch-bg-highlight);
+  }
+  &:disabled {
+    background-color: var(--ps-green-disabled);
+    pointer-events: none;
+  }
+}
+
+.secondary {
+  border-color: transparent;
+  color: var(--ps-immutable-off-white);
+  background-color: var(--ps-blue-primary);
+
+  &:hover {
+    background-color: var(--ps-blue-highlight);
+  }
+  &:disabled {
+    background-color: var(--ps-blue-disabled);
+    pointer-events: none;
+  }
+}
+
+.float {
+  @extend .default;
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.danger {
+  border-color: transparent;
+  color: var(--ps-neutral-2);
+  background-color: var(--ps-red-primary);
+  &:hover {
+    background-color: var(--ps-red-highlight);
+  }
+  &:disabled {
+    background-color: var(--ps-red-disabled);
+    pointer-events: none;
+  }
+}
+
+.outline {
+  @extend .default;
+  background-color: transparent;
+
+  &:hover:not(:disabled) {
+    background-color: rgba(144, 202, 249, 0.08);
+  }
+}
+
+// only the first and last elements should have styling
+.grouped {
+  margin: 0;
+  border-right: 0;
+  border-radius: 0;
+
+  // give it a bit more room to breath
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.grouped:first-child {
+  border-left: $border;
+
+  border-radius: $border-radius 0 0 $border-radius;
+}
+.grouped:last-child {
+  border-right: $border;
+
+  border-radius: 0 $border-radius $border-radius 0;
+}

package/src/shims/Button.tsx

@@ -0,0 +1,128 @@
+import React, { ReactNode } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import cx from 'classnames';
+import styles from './Button.module.scss';
+
+export interface ButtonProps {
+  kind?: 'default' | 'primary' | 'secondary' | 'danger' | 'outline' | 'float';
+  // kind?: 'default' | 'primary' | 'secondary' | 'danger' | 'float' | 'outline';
+  /** Whether the button is disabled or not */
+  disabled?: boolean;
+  icon?: IconDefinition;
+  iconNode?: ReactNode;
+
+  children?: React.ReactNode;
+
+  /** Buttons are grouped so that only the first and last have clear limits */
+  grouped?: boolean;
+
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+
+  // TODO
+  // for the full list use refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+  type?: 'button' | 'submit';
+  ['data-testid']?: string;
+
+  ['aria-label']?: string;
+
+  className?: string;
+
+  id?: string;
+  form?: React.ButtonHTMLAttributes<HTMLButtonElement>['form'];
+
+  /** disable a box around it */
+  noBox?: boolean;
+
+  /** ONLY use this if within a modal (https://stackoverflow.com/a/71848275 and https://citizensadvice.github.io/react-dialogs/modal/auto_focus/index.html) */
+  autoFocus?: React.ButtonHTMLAttributes<HTMLButtonElement>['autoFocus'];
+}
+
+const Button = React.forwardRef(function Button(
+  {
+    disabled = false,
+    kind = 'default',
+    type = 'button',
+    icon,
+    iconNode,
+    children,
+    grouped,
+    onClick,
+    id,
+    className,
+    form,
+    noBox,
+    autoFocus,
+    ...props
+  }: ButtonProps,
+  ref: React.LegacyRef<HTMLButtonElement>
+) {
+  return (
+    <button
+      // needed for tooltip
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      id={id}
+      ref={ref}
+      type={type}
+      data-testid={props['data-testid']}
+      disabled={disabled}
+      onClick={onClick}
+      form={form}
+      autoFocus={autoFocus} // eslint-disable-line jsx-a11y/no-autofocus
+      aria-label={props['aria-label']}
+      className={cx(
+        styles.button,
+        grouped ? styles.grouped : '',
+        getKindStyles(kind),
+        className,
+        noBox && styles.noBox,
+        iconNode && styles.customIcon,
+        !icon && !iconNode && styles.noIcon
+      )}
+    >
+      {icon ? (
+        <FontAwesomeIcon
+          icon={icon}
+          className={children ? styles.iconWithText : ''}
+        />
+      ) : null}
+      {iconNode}
+      {children}
+    </button>
+  );
+});
+
+function getKindStyles(kind: ButtonProps['kind']) {
+  switch (kind) {
+    case 'default': {
+      return styles.default;
+    }
+
+    case 'primary': {
+      return styles.primary;
+    }
+
+    case 'secondary': {
+      return styles.secondary;
+    }
+
+    case 'danger': {
+      return styles.danger;
+    }
+
+    case 'outline': {
+      return styles.outline;
+    }
+
+    case 'float': {
+      return styles.float;
+    }
+
+    default: {
+      throw Error(`Unsupported kind ${kind}`);
+    }
+  }
+}
+
+export default Button;

package/src/shims/Dropdown.module.scss

@@ -0,0 +1,63 @@
+.dropdownMenu {
+  padding: 0.25rem 0;
+  box-shadow: 0px 2px 6px var(--ps-dropdown-shadow) !important;
+  background-color: var(--ps-dropdown-background) !important;
+  color: var(--ps-neutral-2) !important;
+
+  & ul[class*='szh-menu'] {
+    color: var(--ps-neutral-2) !important;
+    background-color: var(--ps-dropdown-background) !important;
+  }
+
+  li[class='szh-menu__header'] {
+    text-align: left;
+  }
+
+  & li[class*='hover'],
+  div[class*='hover'] {
+    background-color: var(--ps-ui-element-bg-highlight);
+  }
+
+  [class*='szh-menu--open']:empty {
+    display: none;
+  }
+
+  [class*='szh-menu__item active'] {
+    background-color: var(--ps-ui-element-bg-highlight);
+    color: var(--ps-selected-app);
+  }
+
+  [class*='szh-menu__item--focusable'] {
+    // important to ignore the hover effect
+    background-color: inherit !important;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+
+    input {
+      width: 100%;
+    }
+  }
+}
+
+.dropdownMenuButton {
+  outline: none;
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  border-radius: 4px;
+  background-color: var(--ps-ui-element-bg-primary);
+  border: 1px solid var(--ps-ui-border);
+  margin-right: 5px;
+  padding-right: 20px;
+  &::after {
+    content: '▾';
+    position: absolute;
+    top: 3px;
+    right: 5px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--ps-ui-element-bg-highlight);
+  }
+}

package/src/shims/Dropdown.tsx

@@ -0,0 +1,96 @@
+import '@szhsin/react-menu/dist/index.css';
+import React from 'react';
+import {
+  ClickEvent,
+  Menu,
+  MenuProps,
+  MenuHeader,
+  SubMenu as LibSubmenu,
+  MenuItem as LibMenuItem,
+  MenuButton as LibMenuButton,
+  FocusableItem as LibFocusableItem,
+  MenuGroup as LibMenuGroup,
+} from '@szhsin/react-menu';
+
+import cx from 'classnames';
+import styles from './Dropdown.module.scss';
+
+  // 删除 offsetX 和 offsetY 相关代码
+  export interface DropdownProps {
+    id?: string;
+    disabled?: boolean;
+    ['data-testid']?: string;
+    className?: string;
+    menuButtonClassName?: string;
+    label: string;
+    value?: string;
+    children?: JSX.Element[] | JSX.Element;
+    onItemClick?: (event: ClickEvent) => void;
+    overflow?: MenuProps['overflow'];
+    position?: MenuProps['position'];
+    direction?: MenuProps['direction'];
+    align?: MenuProps['align'];
+    viewScroll?: MenuProps['viewScroll'];
+    arrow?: MenuProps['arrow'];
+    ariaLabel?: MenuProps['aria-label'];
+    menuButton?: JSX.Element;
+    portal?: MenuProps['portal'];
+  }
+  
+  export default function Dropdown({
+    id,
+    children,
+    className,
+    disabled,
+    value,
+    label,
+    onItemClick,
+    overflow,
+    position,
+    direction,
+    align,
+    viewScroll,
+    arrow,
+    menuButtonClassName = '',
+    ariaLabel,
+    portal,
+    ...props
+  }: DropdownProps) {
+    const menuButtonComponent = props.menuButton || (
+      <MenuButton
+        aria-label={ariaLabel}
+        className={`${styles.dropdownMenuButton} ${menuButtonClassName}`}
+        disabled={disabled}
+        type="button"
+      >
+        {value || label}
+      </MenuButton>
+    );
+  
+    return (
+      <Menu
+        id={id}
+        aria-label={ariaLabel}
+        className={cx(className, styles.dropdownMenu)}
+        data-testid={props['data-testid']}
+        onItemClick={onItemClick}
+        overflow={overflow}
+        position={position}
+        direction={direction}
+        align={align}
+        viewScroll={viewScroll}
+        arrow={arrow}
+        menuButton={menuButtonComponent}
+        portal={portal}
+      >
+        <MenuHeader>{label}</MenuHeader>
+        {children}
+      </Menu>
+    );
+  }
+
+export const SubMenu = LibSubmenu;
+export const MenuItem = LibMenuItem;
+export const MenuButton = LibMenuButton as ShamefulAny;
+export const FocusableItem = LibFocusableItem;
+export const MenuGroup = LibMenuGroup;

package/src/shims/Input.module.scss

@@ -0,0 +1,15 @@
+@use '../sass/_mixins' as *;
+
+.input {
+  @include outline;
+  display: inline-block;
+  position: relative;
+  border-radius: 4px;
+  padding: 0.25em 0.375em;
+  border: 1px solid var(--ps-ui-border);
+
+  &[type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+}

package/src/shims/Input.tsx

@@ -0,0 +1,55 @@
+import React, { Ref, ChangeEvent } from 'react';
+import { DebounceInput } from 'react-debounce-input';
+import styles from './Input.module.scss';
+
+interface InputProps {
+  testId?: string;
+  className?: string;
+  type: 'search' | 'text' | 'password' | 'email' | 'number';
+  name: string;
+  placeholder?: string;
+  minLength?: number;
+  debounceTimeout?: number;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  value: string | number;
+  htmlId?: string;
+}
+
+/**
+ * @deprecated use TextField instead
+ */
+const Input = React.forwardRef(
+  (
+    {
+      testId,
+      className,
+      type,
+      name,
+      placeholder,
+      minLength = 0,
+      debounceTimeout = 100,
+      onChange,
+      value,
+      htmlId,
+    }: InputProps,
+    ref?: Ref<HTMLInputElement>
+  ) => {
+    return (
+      <DebounceInput
+        inputRef={ref}
+        data-testid={testId}
+        className={`${styles.input} ${className || ''}`}
+        type={type}
+        name={name}
+        placeholder={placeholder}
+        minLength={minLength}
+        debounceTimeout={debounceTimeout}
+        onChange={onChange}
+        value={value}
+        id={htmlId}
+      />
+    );
+  }
+);
+
+export default Input;

package/src/shims/LoadingSpinner.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Spinner from 'react-svg-spinner';
+
+interface LoadingSpinnerProps {
+  className?: string;
+  size?: string;
+}
+
+export default function LoadingSpinner({
+  className,
+  size = '20px',
+}: LoadingSpinnerProps) {
+  // TODO ditch the library and create ourselves
+  return (
+    <span role="progressbar" className={className}>
+      <Spinner color="rgba(255,255,255,0.6)" size={size} />
+    </span>
+  );
+}

package/src/shims/Menu.tsx

@@ -0,0 +1,9 @@
+import {
+  Menu,
+  MenuItem,
+  ControlledMenu,
+  useMenuState,
+} from '@szhsin/react-menu';
+import type { ClickEvent } from '@szhsin/react-menu';
+
+export { ControlledMenu, Menu, MenuItem, useMenuState, ClickEvent };

package/src/shims/NoData.module.scss

@@ -0,0 +1,6 @@
+.noData {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  padding: 60px 0;
+}

package/src/shims/NoData.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import styles from './NoData.module.scss';
+
+export default function NoData() {
+  return (
+    <div data-testid="no-data" className={styles.noData}>
+      <span>No data available</span>
+    </div>
+  );
+}

package/src/shims/Table.module.scss

@@ -0,0 +1,82 @@
+.table {
+  width: 100%;
+  table-layout: fixed;
+
+  thead th {
+    &.sortable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .sortArrow {
+      display: inline-block;
+      border: 5px solid transparent;
+      border-top-color: var(--ps-ui-foreground-text);
+      top: 3px;
+      position: relative;
+      margin-left: 7px;
+
+      &.asc {
+        border-top-color: transparent;
+        border-bottom-color: var(--ps-button-switch-bg-highlight);
+        top: -2px;
+      }
+
+      &.desc {
+        border-top-color: var(--ps-button-switch-bg-highlight);
+        top: 3px;
+      }
+    }
+  }
+
+  thead,
+  tbody tr:nth-child(2n) {
+    background-color: var(--ps-neutral-9);
+  }
+
+  tbody {
+    cursor: pointer;
+
+    td {
+      font-weight: initial;
+      text-align: center;
+    }
+
+    tr {
+      &.isRowSelected {
+        cursor: pointer;
+        background: var(--ps-table-highlight-row-bg) !important;
+        color: var(--ps-table-highlight-row-text);
+      }
+
+      &.isRowDisabled td {
+        text-decoration: line-through;
+      }
+
+      &:not(.isRowSelected) {
+        &:hover {
+          cursor: pointer;
+          color: var(--ps-neutral-2);
+          background: var(--ps-ui-element-bg-highlight);
+        }
+      }
+    }
+
+    td,
+    th {
+      border: 1px solid var(--ps-ui-border);
+      padding: 4px 10px;
+      width: 10%;
+    }
+  }
+}
+
+.loadingSpinner {
+  text-align: center;
+  margin-top: 50px;
+}
+
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+}