fix(admin-ui): Lint all UI files (#3459)

2023-03-13 14:02:20 +01:00
parent 55febef7f1
commit ad7d7fcd51
432 changed files with 1593 additions and 1767 deletions
@@ -34,7 +34,7 @@ export const AdjacentContainer = forwardRef<
    ref
  ) => {
    return (
-      <div className="flex flex-col gap-y-xsmall w-full" ref={ref}>
+      <div className="gap-y-xsmall flex w-full flex-col" ref={ref}>
        {label && (
          <label
            className="inter-small-semibold text-grey-50"
@@ -77,7 +77,7 @@ export const SelectContainer = <
          "--has-value": hasValue,
        },
        clsx(
-          "relative pointer-events-auto",
+          "pointer-events-auto relative",
          { "text-grey-40": isDisabled },
          className
        )
@@ -116,7 +116,7 @@ export const ValueContainer = <
            "value-container--has-value": hasValue,
          },
          clsx(
-            "group flex items-center flex-wrap relative scrolling-touch overflow-hidden flex-1",
+            "scrolling-touch group relative flex flex-1 flex-wrap items-center overflow-hidden",
            {
              "gap-2xsmall": isMulti,
            },
@@ -125,14 +125,14 @@ export const ValueContainer = <
        )}
      >
        {value?.length > 0 && (
-          <div className="h-7 bg-grey-20 text-grey-50 px-small inter-small-semibold flex items-center rounded-rounded gap-x-2xsmall cursor-default">
+          <div className="bg-grey-20 text-grey-50 px-small inter-small-semibold rounded-rounded gap-x-2xsmall flex h-7 cursor-default items-center">
            <span>{value.length}</span>
          </div>
        )}
        <div className="relative grow">
          {children}
          {value?.length > 0 && inputValue === "" && (
-            <span className="absolute top-1/2 -translate-y-1/2 inter-base-regular text-grey-50">
+            <span className="inter-base-regular text-grey-50 absolute top-1/2 -translate-y-1/2">
              {selectedPlaceholder || label || "Selected"}
            </span>
          )}
@@ -151,7 +151,7 @@ export const ValueContainer = <
          "value-container--has-value": hasValue,
        },
        clsx(
-          "flex items-center flex-wrap relative scrolling-touch overflow-hidden flex-1",
+          "scrolling-touch relative flex flex-1 flex-wrap items-center overflow-hidden",
          {
            "gap-2xsmall": isMulti,
          },
@@ -181,7 +181,7 @@ export const IndicatorsContainer = <
        {
          "indicators-container": true,
        },
-        clsx("text-grey-50 flex items-center gap-x-small px-small", className)
+        clsx("text-grey-50 gap-x-small px-small flex items-center", className)
      )}
    >
      {children}
@@ -38,7 +38,7 @@ const Control = <
          "control--menu-is-open": menuIsOpen,
        },
        clsx(
-          "flex p-0 overflow-hidden rounded-rounded border border-gray-20 bg-grey-5 focus-within:shadow-cta transition-colors focus-within:border-violet-60 box-border pl-small",
+          "rounded-rounded border-gray-20 bg-grey-5 focus-within:shadow-cta focus-within:border-violet-60 pl-small box-border flex overflow-hidden border p-0 transition-colors",
          {
            "h-xlarge": size === "sm",
            "h-10": size === "md" || !size,
@@ -50,7 +50,7 @@ const Control = <
    >
      <div
        className={clsx(
-          "flex items-center flex-1",
+          "flex flex-1 items-center",
          customStyles?.inner_control
        )}
      >
@@ -53,7 +53,7 @@ const Menu = <
      className={cx(
        { menu: true },
        clsx(
-          "absolute w-full overflow-hidden border-border z-[60] bg-grey-0 rounded-rounded border border-grey-20 shadow-dropdown mb-base",
+          "border-border bg-grey-0 rounded-rounded border-grey-20 shadow-dropdown mb-base absolute z-[60] w-full overflow-hidden border",
          {
            "top-[calc(100%+8px)]": placement === "bottom",
            "bottom-full": placement === "top",
@@ -178,7 +178,7 @@ export const MenuList = <
          "menu-list": true,
          "menu-list--is-multi": isMulti,
        },
-        clsx("overflow-y-auto flex flex-col py-xsmall no-scrollbar", className)
+        clsx("py-xsmall no-scrollbar flex flex-col overflow-y-auto", className)
      )}
    >
      {isMulti && selectAll && (
@@ -208,14 +208,14 @@ export const LoadingMessage = <
    return (
      <div
        className={clsx(
-          "w-full flex items-center px-base transition-colors hover:bg-grey-5",
+          "px-base hover:bg-grey-5 flex w-full items-center transition-colors",
          {
            "h-xlarge": size === "sm",
            "h-10": size === "md" || !size,
          }
        )}
      >
-        <div className="bg-grey-10 animate-pulse w-1/4 h-xsmall rounded-rounded" />
+        <div className="bg-grey-10 h-xsmall rounded-rounded w-1/4 animate-pulse" />
      </div>
    )
  }
@@ -271,9 +271,9 @@ export const Option = <
          "option--is-focused": isFocused,
        },
        clsx(
-          "flex items-center justify-between py-xsmall px-base transition-colors hover:bg-grey-5",
+          "py-xsmall px-base hover:bg-grey-5 flex items-center justify-between transition-colors",
          {
-            "text-grey-30 select-none cursor-not-allowed": isDisabled,
+            "text-grey-30 cursor-not-allowed select-none": isDisabled,
            "bg-grey-10": isFocused && !isDisabled,
            hidden: hideSelectedOptions && isSelected,
          },
@@ -290,13 +290,13 @@ export const Option = <
      tabIndex={isDisabled ? -1 : 0}
      {...innerProps}
    >
-      <div className="flex items-center gap-x-small flex-1">
+      <div className="gap-x-small flex flex-1 items-center">
        {isMulti && (
          <CheckboxAdornment isSelected={isSelected} isDisabled={isDisabled} />
        )}
        <div
          className={clsx(
-            "flex items-center justify-between gap-x-xsmall inter-base-regular flex-1",
+            "gap-x-xsmall inter-base-regular flex flex-1 items-center justify-between",
            {
              truncate: !!truncateOption,
            }
@@ -306,14 +306,14 @@ export const Option = <
          <span className="w-full">{children}</span>

          {suffix && (
-            <span className="inter-base-regular justify-self-end text-grey-50">
+            <span className="inter-base-regular text-grey-50 justify-self-end">
              {suffix}
            </span>
          )}
        </div>
      </div>
      {!isMulti && (
-        <div className="w-5 ml-xsmall">
+        <div className="ml-xsmall w-5">
          {isSelected && <CheckIcon size={16} />}
        </div>
      )}
@@ -328,7 +328,7 @@ const CheckboxAdornment = ({
  return (
    <div
      className={clsx(
-        `w-base h-base flex justify-center text-grey-0 border-grey-30 border rounded-base transition-colors`,
+        `w-base h-base text-grey-0 border-grey-30 rounded-base flex justify-center border transition-colors`,
        {
          "bg-violet-60 border-violet-60": isSelected,
          "bg-grey-5": isDisabled,
@@ -1,13 +1,12 @@
-import clsx from "clsx";
-import React from "react";
+import clsx from "clsx"
 import {
-    GroupBase,
-    MultiValueGenericProps,
-    MultiValueProps,
-    MultiValueRemoveProps
-} from "react-select";
-import CrossIcon from "../../../../fundamentals/icons/cross-icon";
-import { optionIsFixed } from "../utils";
+  GroupBase,
+  MultiValueGenericProps,
+  MultiValueProps,
+  MultiValueRemoveProps,
+} from "react-select"
+import CrossIcon from "../../../../fundamentals/icons/cross-icon"
+import { optionIsFixed } from "../utils"

 const MultiValue = <
  Option,
@@ -31,12 +30,15 @@ const MultiValue = <
    <Container
      data={data}
      innerProps={{
-        className: cx({
-          "multi-value": true,
-          "multi-value--is-disabled": isDisabled,
-        }, clsx({
-            "bg-grey-70 text-grey-0": isFocused
-        })),
+        className: cx(
+          {
+            "multi-value": true,
+            "multi-value--is-disabled": isDisabled,
+          },
+          clsx({
+            "bg-grey-70 text-grey-0": isFocused,
+          })
+        ),
        ...innerProps,
      }}
      selectProps={selectProps}
@@ -83,31 +85,34 @@ export const MultiValueContainer = <
  children,
  innerProps: { className },
 }: MultiValueGenericProps<Option, IsMulti, Group>) => {
-    return (
-        <span className={clsx("flex items-center gap-x-2xsmall py-2xsmall pl-small pr-2.5 rounded-rounded transition-colors bg-grey-20 text-grey-50 inter-small-semibold", className)}>{children}</span>
-    )
+  return (
+    <span
+      className={clsx(
+        "gap-x-2xsmall py-2xsmall pl-small rounded-rounded bg-grey-20 text-grey-50 inter-small-semibold flex items-center pr-2.5 transition-colors",
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
 }

 export const MultiValueRemove = <
  Option = unknown,
  IsMulti extends boolean = boolean,
  Group extends GroupBase<Option> = GroupBase<Option>
->( 
+>(
  props: MultiValueRemoveProps<Option, IsMulti, Group>
 ) => {
-  const { children, innerProps, data } = props;
+  const { children, innerProps, data } = props

  if (optionIsFixed(data) && data.isFixed) {
-    return null;
+    return null
  }

  return (
-    <div
-      {...innerProps}
-      role="button"
-      className="text-grey-40"
-    >
+    <div {...innerProps} role="button" className="text-grey-40">
      {children || <CrossIcon size={16} />}
    </div>
-  );
-};
+  )
+}
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { GroupBase, PlaceholderProps } from "react-select"

 const Placeholder = <
@@ -20,7 +19,7 @@ const Placeholder = <
          placeholder: true,
        },
        clsx(
-          "absolute top-1/2 -translate-y-1/2 select-none inter-base-regular text-grey-50",
+          "inter-base-regular text-grey-50 absolute top-1/2 -translate-y-1/2 select-none",
          className
        )
      )}
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { GroupBase, SingleValueProps } from "react-select"
 import { hasPrefix } from "../utils"

@@ -26,12 +25,12 @@ const SingleValue = <
          "single-value--is-disabled": isDisabled,
        },
        clsx(
-          "overflow-hidden absolute top-1/2 -translate-y-1/2 whitespace-nowrap overflow-ellipsis",
+          "absolute top-1/2 -translate-y-1/2 overflow-hidden overflow-ellipsis whitespace-nowrap",
          className
        )
      )}
    >
-      <div className="flex items-center gap-x-xsmall inter-base-regular">
+      <div className="gap-x-xsmall inter-base-regular flex items-center">
        {prefix && <span className="inter-base-semibold">{prefix}</span>}
        {children}
      </div>
@@ -1,5 +1,5 @@
 import type { MutableRefObject, ReactElement, RefAttributes } from "react"
-import React, { forwardRef } from "react"
+import { forwardRef } from "react"
 import type { GroupBase, SelectInstance } from "react-select"
 import type { CreatableProps } from "react-select/creatable"
 import CreatableReactSelect from "react-select/creatable"