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
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/containers.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/containers.tsx
@@ -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}
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/control.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/control.tsx
@@ -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
        )}
      >
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/menu.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/menu.tsx
@@ -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,
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/multi-value.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/multi-value.tsx
@@ -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>
-  );
-};
+  )
+}
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/placeholder.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/placeholder.tsx
@@ -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
        )
      )}
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/single-value.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/single-value.tsx
@@ -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>
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/createable-select/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/createable-select/index.tsx
@@ -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"
--- a/packages/admin-ui/ui/src/components/molecules/select/select-components.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/select-components.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import {
  ClearIndicatorProps,
  components,
@@ -39,7 +38,7 @@ const MultiValueLabel = <
  return (
    <div
      {...innerProps}
-      className={clsx("bg-grey-5 mx-0 inter-base-regular p-0", {
+      className={clsx("bg-grey-5 inter-base-regular mx-0 p-0", {
        "after:content-[',']": !isLast,
      })}
    >
@@ -59,9 +58,9 @@ const Menu = <
  return (
    <components.Menu
      className={clsx("!rounded-rounded", {
-        "-mt-1 z-60":
+        "z-60 -mt-1":
          !props.selectProps.isSearchable && props.menuPlacement === "bottom",
-        "mb-3 z-60":
+        "z-60 mb-3":
          !props.selectProps.isSearchable && props.menuPlacement === "top",
      })}
      {...props}
@@ -95,7 +94,7 @@ const Placeholder = <
  props: PlaceholderProps<Option, IsMulti, Group>
 ) => {
  return props.selectProps.menuIsOpen ? null : (
-    <components.Placeholder {...props} className="!mx-0 !text-grey-40" />
+    <components.Placeholder {...props} className="!text-grey-40 !mx-0" />
  )
 }

@@ -142,7 +141,7 @@ const SelectContainer = <
  props: ContainerProps<Option, IsMulti, Group>
 ) => {
  return (
-    <div className="bg-grey-5 h-10 border border-grey-20 rounded-rounded focus-within:shadow-cta focus-within:border-violet-60 px-small">
+    <div className="bg-grey-5 border-grey-20 rounded-rounded focus-within:shadow-cta focus-within:border-violet-60 px-small h-10 border">
      <components.SelectContainer {...props} />
    </div>
  )
@@ -164,8 +163,8 @@ const Input = <
  }

  return (
-    <div className="w-full flex items-center h-full space-between">
-      <div className="w-full flex items-center">
+    <div className="space-between flex h-full w-full items-center">
+      <div className="flex w-full items-center">
        <span className="text-grey-40 mr-2">
          <SearchIcon size={16} />
        </span>
@@ -190,7 +189,7 @@ const ClearIndicator = <
  return (
    <div
      {...innerProps}
-      className="hover:bg-grey-10 text-grey-50 rounded cursor-pointer"
+      className="hover:bg-grey-10 text-grey-50 cursor-pointer rounded"
    >
      <XCircleIcon size={16} />
    </div>
@@ -201,7 +200,7 @@ const CheckboxAdornment = ({ isSelected }: { isSelected: boolean }) => {
  return (
    <div
      className={clsx(
-        `w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base`,
+        `text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border`,
        {
          "bg-violet-60": isSelected,
        }
@@ -219,18 +218,18 @@ const RadioAdornment = ({ isSelected }: { isSelected: boolean }) => {
    <div
      className={clsx(
        "radio-outer-ring outline-0",
-        "shrink-0 w-[20px] h-[20px] rounded-circle",
+        "rounded-circle h-[20px] w-[20px] shrink-0",
        {
          "shadow-[0_0_0_1px] shadow-[#D1D5DB]": !isSelected,
-          "shadow-[0_0_0_2px] shadow-violet-60": isSelected,
+          "shadow-violet-60 shadow-[0_0_0_2px]": isSelected,
        }
      )}
    >
      {isSelected && (
        <div
          className={clsx(
-            "group flex items-center justify-center w-full h-full relative",
-            "after:absolute after:inset-0 after:m-auto after:block after:w-[12px] after:h-[12px] after:bg-violet-60 after:rounded-circle"
+            "group relative flex h-full w-full items-center justify-center",
+            "after:bg-violet-60 after:rounded-circle after:absolute after:inset-0 after:m-auto after:block after:h-[12px] after:w-[12px]"
          )}
        />
      )}
@@ -248,7 +247,7 @@ const NoOptionsMessage = <
 }: NoticeProps<Option, IsMulti, Group>) => {
  return (
    <div
-      className="text-grey-50 inter-small-semibold text-center p-xsmall"
+      className="text-grey-50 inter-small-semibold p-xsmall text-center"
      {...innerProps}
    >
      <p>{isLoading ? "Loading..." : "No options"}</p>
@@ -267,12 +266,12 @@ const Option = <
  return (
    <components.Option
      {...props}
-      className="my-1 py-0 px-2 bg-grey-0 active:bg-grey-0"
+      className="bg-grey-0 active:bg-grey-0 my-1 py-0 px-2"
    >
      <div
-        className={`item-renderer h-full hover:bg-grey-10 py-2 px-2 cursor-pointer rounded`}
+        className={`item-renderer hover:bg-grey-10 h-full cursor-pointer rounded py-2 px-2`}
      >
-        <div className="items-center h-full flex">
+        <div className="flex h-full items-center">
          {props.data?.value !== "all" && props.data?.label !== "Select All" ? (
            <>
              {props.isMulti ? (
@@ -280,7 +279,7 @@ const Option = <
              ) : (
                <RadioAdornment isSelected={props.isSelected} />
              )}
-              <span className="ml-3 text-grey-90 inter-base-regular">
+              <span className="text-grey-90 inter-base-regular ml-3">
                {props.data.label}
              </span>
            </>