Mattupham/fe 513 eslint disallow default exports

packages/server/src/queries/complex/assets/__tests__/categories.spec.ts

@@ -1,4 +1,4 @@
-import dayjs from "../../../../utils/dayjs";
+import { dayjs } from "../../../../utils/dayjs";
 import { AssetLists } from "../../../__tests__/mock-asset-lists";
 import { isAssetInCategories } from "../categories";
 

packages/server/src/queries/complex/assets/categories.ts

@@ -3,7 +3,7 @@ import cachified, { CacheEntry } from "cachified";
 import { LRUCache } from "lru-cache";
 
 import { DEFAULT_LRU_OPTIONS } from "../../../utils";
-import dayjs from "../../../utils/dayjs";
+import { dayjs } from "../../../utils/dayjs";
 import { queryUpcomingAssets } from "../../github";
 
 /** Filters an asset for whether it is included in the given list of categories. */

packages/server/src/queries/complex/assets/price/historical.ts

@@ -2,7 +2,7 @@ import cachified, { CacheEntry } from "cachified";
 import { LRUCache } from "lru-cache";
 
 import { DEFAULT_LRU_OPTIONS } from "../../../../utils/cache";
-import dayjs from "../../../../utils/dayjs";
+import { dayjs } from "../../../../utils/dayjs";
 import { queryMarketChart } from "../../../coingecko";
 import {
   queryTokenHistoricalChart,

packages/server/src/queries/complex/earn/strategies.ts

@@ -17,7 +17,7 @@ import {
 } from "../../../queries/data-services/earn";
 import { queryOsmosisCMS } from "../../../queries/github";
 import { DEFAULT_LRU_OPTIONS } from "../../../utils/cache";
-import dayjs from "../../../utils/dayjs";
+import { dayjs } from "../../../utils/dayjs";
 import { captureIfError } from "../../../utils/error";
 import { type Asset, getAsset } from "../assets";
 import { DEFAULT_VS_CURRENCY } from "../assets/config";

packages/server/src/queries/complex/osmosis/lockup.ts

@@ -1,7 +1,7 @@
 import { Chain } from "@osmosis-labs/types";
 import { Duration } from "dayjs/plugin/duration";
 
-import dayjs from "../../../utils/dayjs";
+import { dayjs } from "../../../utils/dayjs";
 import { queryAccountLockedLongerDuration } from "../../osmosis/lockup";
 
 export type UserLock = {

packages/server/src/queries/complex/pools/bonding.ts

@@ -2,7 +2,7 @@ import { CoinPretty, PricePretty, RatePretty } from "@keplr-wallet/unit";
 import { AssetList, Chain } from "@osmosis-labs/types";
 import type { Duration } from "dayjs/plugin/duration";
 
-import dayjs from "../../../utils/dayjs";
+import { dayjs } from "../../../utils/dayjs";
 import { captureErrorAndReturn } from "../../../utils/error";
 import { querySyntheticLockupsByLockId } from "../../osmosis/lockup";
 import {

packages/server/src/utils/dayjs.ts

@@ -5,5 +5,4 @@ import duration from "dayjs/plugin/duration";
 
 dayjs.extend(duration);
 
-// eslint-disable-next-line import/no-default-export
-export default dayjs;
+export { dayjs };

packages/web/.eslintrc.json

@@ -25,6 +25,17 @@
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
     "unused-imports/no-unused-imports": "error",
-    "react/no-unescaped-entities": "off"
-  }
+    "react/no-unescaped-entities": "off",
+    "import/no-default-export": "error"
+    // see https://stackoverflow.com/questions/44378395/how-to-configure-eslint-so-that-it-disallows-default-exports
+  },
+  "overrides": [
+    // Pages router, config files
+    {
+      "files": ["pages/**/*", "playwright.config.ts"],
+      "rules": {
+        "import/no-default-export": "off"
+      }
+    }
+  ]
 }

packages/web/components/assets/highlights-categories.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { FunctionComponent, ReactNode } from "react";
 
 import { PriceChange } from "~/components/assets/price";
-import SkeletonLoader from "~/components/loaders/skeleton-loader";
+import { SkeletonLoader } from "~/components/loaders/skeleton-loader";
 import { EventName } from "~/config";
 import {
   Breakpoint,

packages/web/components/buttons/clipboard-button.tsx

@@ -5,12 +5,12 @@ import { useState } from "react";
 import { Icon } from "~/components/assets";
 import { SpriteIconId } from "~/config";
 
-import IconButton from "./icon-button";
+import { IconButton } from "./icon-button";
 
 /**
  * Renders an icon within a button.
  */
-const ClipboardButton = forwardRef<
+export const ClipboardButton = forwardRef<
   HTMLButtonElement,
   {
     value?: string;
@@ -78,5 +78,3 @@ const ClipboardButton = forwardRef<
     </IconButton>
   );
 });
-
-export default ClipboardButton;

packages/web/components/buttons/icon-button.tsx

@@ -11,7 +11,7 @@ import { Button } from "~/components/buttons/button";
 /**
  * Renders an icon within a button.
  */
-const IconButton = forwardRef<
+export const IconButton = forwardRef<
   HTMLButtonElement,
   {
     icon?: ReactNode;
@@ -41,5 +41,3 @@ const IconButton = forwardRef<
     </Button>
   );
 });
-
-export default IconButton;

packages/web/components/buttons/link-button.tsx

@@ -4,7 +4,7 @@ import { ReactElement } from "react";
 
 import { Button } from "~/components/ui/button";
 
-export default function LinkButton({
+export function LinkButton({
   label,
   icon,
   ariaLabel,

packages/web/components/cards/my-position/expanded.tsx

@@ -41,11 +41,17 @@ import { formatPretty, getPriceExtendedFormatOptions } from "~/utils/formatter";
 import { RouterOutputs } from "~/utils/trpc";
 
 const ConcentratedLiquidityDepthChart = dynamic(
-  () => import("~/components/chart/concentrated-liquidity-depth"),
+  () =>
+    import("~/components/chart/concentrated-liquidity-depth").then(
+      (module) => module.ConcentratedLiquidityDepthChart
+    ),
   { ssr: false }
 );
 const HistoricalPriceChart = dynamic(
-  () => import("~/components/chart/price-historical"),
+  () =>
+    import("~/components/chart/price-historical").then(
+      (module) => module.HistoricalPriceChart
+    ),
   { ssr: false }
 );
 

packages/web/components/cards/my-position/index.tsx

@@ -7,7 +7,7 @@ import { FunctionComponent, ReactNode, useState } from "react";
 import { Icon, PoolAssetsIcon, PoolAssetsName } from "~/components/assets";
 import { MyPositionCardExpandedSection } from "~/components/cards/my-position/expanded";
 import { MyPositionStatus } from "~/components/cards/my-position/status";
-import SkeletonLoader from "~/components/loaders/skeleton-loader";
+import { SkeletonLoader } from "~/components/loaders/skeleton-loader";
 import { EventName } from "~/config";
 import { useFeatureFlags, useTranslation } from "~/hooks";
 import { useAmplitudeAnalytics } from "~/hooks";

packages/web/components/cards/validator-squad-card.tsx

@@ -172,5 +172,3 @@ const AvatarIcon: React.FC<{ extraValidators?: number }> = ({
     </div>
   );
 };
-
-export default AvatarIcon;

packages/web/components/chart/concentrated-liquidity-depth.tsx

@@ -19,7 +19,7 @@ export type DepthData = {
   depth: number;
 };
 
-const ConcentratedLiquidityDepthChart: FunctionComponent<{
+export const ConcentratedLiquidityDepthChart: FunctionComponent<{
   min?: number;
   max?: number;
   yRange: [number, number];
@@ -252,6 +252,3 @@ const DragContainer: FunctionComponent<{
     />
   </Annotation>
 );
-
-// needed for next/dynamic to avoid including visx in main bundle
-export default ConcentratedLiquidityDepthChart;

packages/web/components/chart/pool-composition.tsx

@@ -2,7 +2,7 @@ import { CoinPretty } from "@keplr-wallet/unit";
 import Image from "next/image";
 import { FunctionComponent } from "react";
 
-const PoolComposition: FunctionComponent<{
+export const PoolComposition: FunctionComponent<{
   assets: CoinPretty[];
 }> = ({ assets }) => {
   return (
@@ -28,5 +28,3 @@ const PoolComposition: FunctionComponent<{
     </ul>
   );
 };
-
-export default PoolComposition;

packages/web/components/chart/price-historical-v2.tsx

@@ -20,7 +20,7 @@ const seriesOpt: DeepPartial<AreaSeriesOptions> = {
   crosshairMarkerRadius: 8,
 };
 
-const HistoricalPriceChartV2: FunctionComponent<{
+export const HistoricalPriceChartV2: FunctionComponent<{
   data: { close: number; time: number }[];
   onPointerHover?: (price: number) => void;
   onPointerOut?: () => void;
@@ -50,5 +50,3 @@ const HistoricalPriceChartV2: FunctionComponent<{
     />
   );
 });
-
-export default HistoricalPriceChartV2;

packages/web/components/chart/price-historical.tsx

@@ -21,7 +21,7 @@ import { observer } from "mobx-react-lite";
 import React, { FunctionComponent, memo, useCallback, useMemo } from "react";
 
 import { Icon } from "~/components/assets";
-import SkeletonLoader from "~/components/loaders/skeleton-loader";
+import { SkeletonLoader } from "~/components/loaders/skeleton-loader";
 import { ChartButton } from "~/components/ui/button";
 import { type PriceRange, useTranslation } from "~/hooks";
 import { theme } from "~/tailwind.config";
@@ -33,7 +33,7 @@ import {
 } from "~/utils/formatter";
 import { getDecimalCount } from "~/utils/number";
 
-const HistoricalPriceChart: FunctionComponent<{
+export const HistoricalPriceChart: FunctionComponent<{
   data: { close: number; time: number }[];
   margin?: Partial<Margin>;
   annotations: Dec[];
@@ -246,8 +246,6 @@ const HistoricalPriceChart: FunctionComponent<{
   )
 );
 
-export default HistoricalPriceChart;
-
 export const PriceChartHeader: FunctionComponent<{
   historicalRange: PriceRange;
   setHistoricalRange: (pr: PriceRange) => void;

packages/web/components/client-only.tsx

@@ -1,6 +1,8 @@
 import { PropsWithChildren, useEffect, useState } from "react";
 
-const ClientOnly = (props: PropsWithChildren<{ className?: string }>) => {
+export const ClientOnly = (
+  props: PropsWithChildren<{ className?: string }>
+) => {
   const [hasMounted, setHasMounted] = useState(false);
 
   useEffect(() => {
@@ -13,5 +15,3 @@ const ClientOnly = (props: PropsWithChildren<{ className?: string }>) => {
 
   return <div {...props} />;
 };
-
-export default ClientOnly;

packages/web/components/complex/add-conc-liquidity.tsx

@@ -16,7 +16,7 @@ import React, {
 } from "react";
 
 import { Icon, PoolAssetsIcon, PoolAssetsName } from "~/components/assets";
-import IconButton from "~/components/buttons/icon-button";
+import { IconButton } from "~/components/buttons/icon-button";
 import {
   ChartUnavailable,
   PriceChartHeader,
@@ -45,11 +45,17 @@ import { formatPretty, getPriceExtendedFormatOptions } from "~/utils/formatter";
 import { Tooltip } from "../tooltip";
 
 const ConcentratedLiquidityDepthChart = dynamic(
-  () => import("~/components/chart/concentrated-liquidity-depth"),
+  () =>
+    import("~/components/chart/concentrated-liquidity-depth").then(
+      (module) => module.ConcentratedLiquidityDepthChart
+    ),
   { ssr: false }
 );
 const HistoricalPriceChart = dynamic(
-  () => import("~/components/chart/price-historical"),
+  () =>
+    import("~/components/chart/price-historical").then(
+      (module) => module.HistoricalPriceChart
+    ),
   { ssr: false }
 );
 

packages/web/components/complex/my-pools-card-grid.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useCallback, useMemo, useRef, useState } from "react";
 
 import { PoolCard } from "~/components/cards";
-import SkeletonLoader from "~/components/loaders/skeleton-loader";
+import { SkeletonLoader } from "~/components/loaders/skeleton-loader";
 import { ShowMoreButton } from "~/components/ui/button";
 import { EventName } from "~/config";
 import {

packages/web/components/complex/my-positions-section.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
 import React, { FunctionComponent, useState } from "react";
 
 import { MyPositionCard } from "~/components/cards";
-import SkeletonLoader from "~/components/loaders/skeleton-loader";
+import { SkeletonLoader } from "~/components/loaders/skeleton-loader";
 import { ShowMoreButton } from "~/components/ui/button";
 import { useWalletSelect } from "~/hooks";
 import { useStore } from "~/stores";

packages/web/components/complex/portfolio-page.tsx

@@ -20,7 +20,7 @@ import { api } from "~/utils/trpc";
 
 import { CreditCardIcon } from "../assets/credit-card-icon";
 import { Spinner } from "../loaders";
-import SkeletonLoader from "../loaders/skeleton-loader";
+import { SkeletonLoader } from "../loaders/skeleton-loader";
 import { RecentTransfers } from "../transactions/recent-transfers";
 import { CustomClasses } from "../types";
 import { Button } from "../ui/button";

packages/web/components/complex/transfer.tsx

@@ -12,12 +12,12 @@ import { useClickAway } from "react-use";
 
 import { Icon } from "~/components/assets";
 import { GradientView } from "~/components/assets/gradient-view";
-import IconButton from "~/components/buttons/icon-button";
+import { IconButton } from "~/components/buttons/icon-button";
 import { SwitchWalletButton } from "~/components/buttons/switch-wallet";
 import { BridgeFromToNetwork } from "~/components/complex/bridge-from-to-network";
 import { MenuDropdown, MenuToggle } from "~/components/control";
 import { InputBox } from "~/components/input";
-import SkeletonLoader from "~/components/loaders/skeleton-loader";
+import { SkeletonLoader } from "~/components/loaders/skeleton-loader";
 import { Tooltip } from "~/components/tooltip";
 import { Disableable, InputProps } from "~/components/types";
 import { Button } from "~/components/ui/button";

packages/web/components/drawers/token-select-drawer.tsx

@@ -12,7 +12,7 @@ import {
 import { useLatest } from "react-use";
 
 import { Icon } from "~/components/assets";
-import IconButton from "~/components/buttons/icon-button";
+import { IconButton } from "~/components/buttons/icon-button";
 import { SearchBox } from "~/components/input";
 import { Tooltip } from "~/components/tooltip";
 import { useTranslation } from "~/hooks";
@@ -23,7 +23,7 @@ import { UnverifiedAssetsState } from "~/stores/user-settings";
 import { formatPretty } from "~/utils/formatter";
 
 import { useConst } from "../../hooks/use-const";
-import useDraggableScroll from "../../hooks/use-draggable-scroll";
+import { useDraggableScroll } from "../../hooks/use-draggable-scroll";
 import { useKeyActions } from "../../hooks/use-key-actions";
 import { useStateRef } from "../../hooks/use-state-ref";
 import { useWindowKeyActions } from "../../hooks/window/use-window-key-actions";

packages/web/components/earn/filters/filters-modal.tsx

@@ -16,7 +16,7 @@ interface StrategiesFilter extends ListOption<string> {
   icon: ReactNode;
 }
 
-const FiltersModal = (
+export const FiltersModal = (
   props: ModalBaseProps & {
     rewardTypes: ListOption<string>[];
     lockDurationTypes: ListOption<string>[];
@@ -130,5 +130,3 @@ const FiltersModal = (
     </ModalBase>
   );
 };
-
-export default FiltersModal;

packages/web/components/earn/filters/top-filters.tsx

@@ -7,7 +7,7 @@ import { Icon } from "~/components/assets";
 import { DropdownWithLabel } from "~/components/dropdown-with-label";
 import { DropdownWithMultiSelect } from "~/components/dropdown-with-multi-select";
 import { FilterContext } from "~/components/earn/filters/filter-context";
-import FiltersModal from "~/components/earn/filters/filters-modal";
+import { FiltersModal } from "~/components/earn/filters/filters-modal";
 import { ListOption } from "~/components/earn/table/types/filters";
 import { getListOptions } from "~/components/earn/table/utils";
 import { SearchBox } from "~/components/input";