refactor: use PascalCase for constants

PaulRBerg · PaulRBerg · commit f187042a9ceb · 2025-04-22T17:48:32.000+03:00
refactor: disable react in scope rule
refactor: reorganize atomic components
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -35,6 +35,8 @@ parserOptions:
     jsx: true
   ecmaVersion: "latest"
 root: true
+rules:
+  "react/react-in-jsx-scope": "off"
 settings:
   react:
     version: "detect"
diff --git a/docs/api/01-overview.mdx b/docs/api/01-overview.mdx
@@ -4,7 +4,7 @@ sidebar_position: 1
 title: "Overview"
 ---
 
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # The Sablier APIs
 
diff --git a/docs/api/05-development.mdx b/docs/api/05-development.mdx
@@ -4,7 +4,7 @@ sidebar_position: 5
 title: "Development"
 ---
 
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 ## The Graph
 
diff --git a/docs/api/07-legacy.mdx b/docs/api/07-legacy.mdx
@@ -4,7 +4,7 @@ sidebar_position: 7
 title: "Legacy"
 ---
 
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # Sablier Legacy
 
diff --git a/docs/api/airdrops/01-overview.mdx b/docs/api/airdrops/01-overview.mdx
@@ -4,7 +4,7 @@ sidebar_position: 1
 title: "Overview"
 ---
 
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # Airdrops
 
diff --git a/docs/api/airdrops/02-endpoints.mdx b/docs/api/airdrops/02-endpoints.mdx
@@ -7,7 +7,7 @@ title: "Endpoints"
 import DeprecatedSubgraphs from "@site/docs/snippets/DeprecatedSubgraphs.mdx";
 import EnvioEndpoints from "@site/docs/snippets/EnvioEndpoints.mdx";
 import TheGraphEndpoints from "@site/docs/snippets/TheGraphEndpoints.mdx";
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # Airdrops Endpoints
 
diff --git a/docs/api/airdrops/merkle-api/01-overview.mdx b/docs/api/airdrops/merkle-api/01-overview.mdx
@@ -4,7 +4,7 @@ sidebar_position: 1
 title: "Overview"
 ---
 
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 Sablier's Airdrops rely on pre-configured Merkle trees. This data structure contains the list of recipients as well as
 their individual claim details.
diff --git a/docs/api/airdrops/merkle-api/02-functionality.mdx b/docs/api/airdrops/merkle-api/02-functionality.mdx
@@ -4,7 +4,7 @@ sidebar_position: 2
 title: "Functionality"
 ---
 
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 ## Architecture
 
diff --git a/docs/api/flow/01-overview.mdx b/docs/api/flow/01-overview.mdx
@@ -4,7 +4,7 @@ sidebar_position: 1
 title: "Overview"
 ---
 
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # Sablier Flow
 
diff --git a/docs/api/flow/02-endpoints.mdx b/docs/api/flow/02-endpoints.mdx
@@ -7,7 +7,7 @@ title: "Endpoints"
 import DeprecatedSubgraphs from "@site/docs/snippets/DeprecatedSubgraphs.mdx";
 import EnvioEndpoints from "@site/docs/snippets/EnvioEndpoints.mdx";
 import TheGraphEndpoints from "@site/docs/snippets/TheGraphEndpoints.mdx";
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # Flow Endpoints
 
diff --git a/docs/api/lockup/01-overview.mdx b/docs/api/lockup/01-overview.mdx
@@ -4,7 +4,7 @@ sidebar_position: 1
 title: "Overview"
 ---
 
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # Sablier Lockup
 
diff --git a/docs/api/lockup/02-endpoints.mdx b/docs/api/lockup/02-endpoints.mdx
@@ -7,7 +7,7 @@ title: "Endpoints"
 import DeprecatedSubgraphs from "@site/docs/snippets/DeprecatedSubgraphs.mdx";
 import EnvioEndpoints from "@site/docs/snippets/EnvioEndpoints.mdx";
 import TheGraphEndpoints from "@site/docs/snippets/TheGraphEndpoints.mdx";
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # Lockup Endpoints
 
diff --git a/docs/apps/03-branding.mdx b/docs/apps/03-branding.mdx
@@ -4,7 +4,7 @@ sidebar_position: 3
 title: "Branding"
 ---
 
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 ## Brand Guidelines
 
diff --git a/docs/apps/guides/01-csv-support.mdx b/docs/apps/guides/01-csv-support.mdx
@@ -4,7 +4,7 @@ sidebar_position: 1
 title: "CSV Support"
 ---
 
-import LinkPreview from "@site/src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 The Sablier Interfaces supports CSV files for faster processing and automating large-scale operations. This feature is
 available for both airdrops and streams.
diff --git a/docs/concepts/03-use-cases.mdx b/docs/concepts/03-use-cases.mdx
@@ -5,7 +5,7 @@ title: "Use Cases"
 ---
 
 import Link from "@docusaurus/Link";
-import { links } from "@site/src/constants";
+import { Links } from "@site/src/constants";
 
 While Lockup and Flow both are general-purpose protocols that can be used for a wide variety of applications, some use
 cases are more popular than others. In this article, we will cover the primary reasons people are using Sablier Lockup
@@ -67,7 +67,7 @@ funds are allocated and for what purposes.
 With Sablier streams, the issues mentioned above are avoided. Anyone can use the Sablier interface to monitor all
 streams created by a particular address, as well as all transactions associated with each stream.
 
-To illustrate this, <Link href={links.example}>here</Link>'s an example of a stream as viewed on the Sablier Interface.
+To illustrate this, <Link href={Links.example}>here</Link>'s an example of a stream as viewed on the Sablier Interface.
 
 ## Merkle Airdrops
 
diff --git a/docs/concepts/05-merkle-airdrops.mdx b/docs/concepts/05-merkle-airdrops.mdx
@@ -5,7 +5,7 @@ title: "Merkle Airdrops"
 ---
 
 import Link from "@docusaurus/Link";
-import { links } from "@site/src/constants";
+import { Links } from "@site/src/constants";
 
 :::note
 
@@ -64,7 +64,7 @@ different start time for Vesting depending on when they claim.
 Sablier Labs does not currently offer any white label solutions for Merkle Airdrops. This means that you cannot have
 your logo displayed in the claim page seen by the airstream recipients.
 
-However, we are actively exploring implementing this feature. Fill out <Link href={links.forms.call}>this form</Link>
+However, we are actively exploring implementing this feature. Fill out <Link href={Links.Forms.call}>this form</Link>
 and we will respond as soon as possible.
 
 ## How it Works
diff --git a/docs/concepts/07-chains.mdx b/docs/concepts/07-chains.mdx
@@ -5,10 +5,10 @@ sidebar_position: 7
 ---
 
 import Link from "@docusaurus/Link";
-import { links } from "@site/src/constants";
+import { Links } from "@site/src/constants";
 
 Sablier Protocol is live on 25+ mainnets and 11+ testnets. However, not all of these chains may be supported by the
-[Sablier Interface](https://app.sablier.com/). If you're interested in that, fill out <Link href={links.forms.call}>this form</Link>.
+[Sablier Interface](https://app.sablier.com/). If you're interested in that, fill out <Link href={Links.Forms.CALL}>this form</Link>.
 
 ## Mainnets
 
@@ -63,5 +63,5 @@ Sablier Protocol is live on 25+ mainnets and 11+ testnets. However, not all of t
 
 - For more information about these EVM chains, such as RPC URLs, check out [Chainlist](https://chainlist.org).
 - Do you want to get Sablier deployed on your chain? If you meet the [requirements](/guides/custom-deployments#requirements)
-  for custom deployment, fill out <Link href={links.forms.chains}>this form</Link> and our team will get back to you.
+  for custom deployment, fill out <Link href={Links.Forms.CHAINS}>this form</Link> and our team will get back to you.
 - Sablier does not support chains with native tokens that do not have 18 decimals.
diff --git a/docs/concepts/08-nft.mdx b/docs/concepts/08-nft.mdx
@@ -5,7 +5,7 @@ title: "NFTs"
 ---
 
 import Link from "@docusaurus/Link";
-import { links } from "@site/src/constants";
+import { Links } from "@site/src/constants";
 import FlowNFTSVG from "@site/static/img/flow-nft.svg";
 import LockupNFTGalleryURL from "@site/static/img/lockup-gallery.webp";
 import LockupNFTSVG from "@site/static/img/lockup-nft.svg";
@@ -50,7 +50,7 @@ find more details on it in the [Transferability](/concepts/transferability) sect
 
 :::info
 
-If you're interested in making an integration, please fill out this <Link href={links.forms.call}>form</Link> and we
+If you're interested in making an integration, please fill out this <Link href={Links.Forms.CALL}>form</Link> and we
 will try to respond as soon as possible.
 
 :::
diff --git a/docs/concepts/lockup/02-stream-shapes.mdx b/docs/concepts/lockup/02-stream-shapes.mdx
@@ -4,7 +4,7 @@ sidebar_position: 2
 title: "Stream Shapes"
 ---
 
-import FunctionPlot from "@site/src/components/FunctionPlot";
+import FunctionPlot from "@site/src/components/organisms/FunctionPlot";
 
 :::note
 
diff --git a/docs/guides/04-custom-deployments.mdx b/docs/guides/04-custom-deployments.mdx
@@ -5,20 +5,20 @@ title: "Custom Deployments"
 ---
 
 import Link from "@docusaurus/Link";
-import { links } from "@site/src/constants";
+import { Links } from "@site/src/constants";
 
 :::info[Reach Out]
 
 {/* prettier-ignore */}
-Want to get Sablier deployed on your chain? If you meet the requirements listed below, fill out <Link href={links.forms.chains}>this
+Want to get Sablier deployed on your chain? If you meet the requirements listed below, fill out <Link href={Links.Forms.CHAINS}>this
 form</Link> and our team will get back to you.
 
 :::
 
 ## Requirements
 
 The Sablier Interface currently supports only The Graph and Envio indexer services. If you use a different indexer, you
-can schedule a call <Link href={links.forms.call}>here</Link> to discuss integration.
+can schedule a call <Link href={Links.Forms.CALL}>here</Link> to discuss integration.
 
 - [x] Blockchain explorer with instructions for verifying contracts
 - [x] Functional JSON-RPC endpoint, preferably listed on [ChainList](https://chainlist.org)
diff --git a/docs/guides/airdrops/02-deployments.mdx b/docs/guides/airdrops/02-deployments.mdx
diff --git a/docs/guides/legacy/03-codebase.mdx b/docs/guides/legacy/03-codebase.mdx
@@ -4,7 +4,7 @@ title: Codebase
 sidebar_position: 5
 ---
 
-import LinkPreview from "../../../src/components/LinkPreview";
+import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 ## Repository
 
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -2,6 +2,7 @@ import type * as Preset from "@docusaurus/preset-classic";
 import type { Config } from "@docusaurus/types";
 import { themes as prismThemes } from "prism-react-renderer";
 import rehypeKatex from "rehype-katex";
+import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 
 const config: Config = {
@@ -26,7 +27,7 @@ const config: Config = {
           editUrl: "https://github.com/sablier-labs/docs/blob/main/",
           rehypePlugins: [rehypeKatex],
           routeBasePath: "/", // Serve the docs at the site's root
-          remarkPlugins: [remarkMath],
+          remarkPlugins: [remarkGfm, remarkMath],
           sidebarPath: require.resolve("./sidebars.js"),
         },
         theme: {
diff --git a/src/components/molecules/Feature.tsx b/src/components/molecules/Feature.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "@emotion/styled";
 import Link from "@docusaurus/Link";
 import ArrowRightIcon from "@heroicons/react/24/outline/ArrowRightIcon";
diff --git a/src/components/molecules/LinkPreview.tsx b/src/components/molecules/LinkPreview.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import styled from "@emotion/styled";
 import Link from "@docusaurus/Link";
 import SablierIcon from "@site/static/img/logo.svg";
diff --git a/src/components/organisms/Background.tsx b/src/components/organisms/Background.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import type { PropsWithChildren } from "react";
 import styled from "@emotion/styled";
 
diff --git a/src/components/organisms/FunctionPlot.tsx b/src/components/organisms/FunctionPlot.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 import functionPlot, { FunctionPlotOptions } from "function-plot";
 
 export interface ExtendedFunctionPlotOptions extends FunctionPlotOptions {
@@ -12,7 +12,7 @@ export interface FunctionPlotProps {
 }
 
 // See https://github.com/mauriciopoppe/function-plot
-const FunctionPlot: React.FC<FunctionPlotProps> = React.memo(function ({ options }: FunctionPlotProps) {
+const FunctionPlot: React.FC<FunctionPlotProps> = memo(function ({ options }: FunctionPlotProps) {
   const rootEl = useRef(null);
 
   useEffect(() => {
diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "@emotion/styled";
 import BoltIcon from "@heroicons/react/24/outline/BoltIcon";
 import CodeBracketIcon from "@heroicons/react/24/outline/CodeBracketIcon";
@@ -7,7 +6,7 @@ import DocumentTextIcon from "@heroicons/react/24/outline/DocumentTextIcon";
 import LightBulbIcon from "@heroicons/react/24/outline/LightBulbIcon";
 import Heading from "@theme/Heading";
 import Feature from "../molecules/Feature";
-import Underlay from "./Header/Underlay";
+import Underlay from "./header/Underlay";
 
 const Wrapper = styled.header`
   width: 100%;
diff --git a/src/components/organisms/Socials.tsx b/src/components/organisms/Socials.tsx
@@ -1,8 +1,7 @@
-import React from "react";
 import styled from "@emotion/styled";
 import Link from "@docusaurus/Link";
 import Heading from "@theme/Heading";
-import { links } from "../../constants";
+import { Links } from "../../constants";
 
 const Wrapper = styled.main`
   display: flex;
@@ -80,23 +79,23 @@ function Socials() {
   return (
     <Wrapper>
       <List>
-        <Social href={links.discord}>
+        <Social href={Links.DISCORD}>
           <img src="img/social/discord.svg" style={{ width: "48px", height: "48px" }} />
           <div>
             <Heading as="h4">Discord</Heading>
             <p>Hop in to the #dev channel to get help.</p>
           </div>
         </Social>
 
-        <Social href={links.github}>
+        <Social href={Links.GitHub.ORG}>
           <img src="img/social/github.svg" style={{ width: "44px", height: "44px" }} />
           <div>
             <Heading as="h4">GitHub</Heading>
             <p>View all Sablier code repositories.</p>
           </div>
         </Social>
 
-        <Social href={links.blog}>
+        <Social href={Links.BLOG}>
           <div>
             <img src="img/logo.svg" style={{ width: "48px", height: "48px" }} />
           </div>
diff --git a/src/components/organisms/header/Underlay.tsx b/src/components/organisms/header/Underlay.tsx
@@ -1,7 +1,6 @@
-import React from "react";
 import styled from "@emotion/styled";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import Background from "../../atoms/Background";
+import Background from "../Background";
 
 const Mesh = styled.div<{ image?: string }>`
   position: absolute;
diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1,14 @@
+export const Links = {
+  Forms: {
+    CALL: "https://forms.gle/6z3XyfSLXDoRghG99",
+    CHAINS: "https://forms.gle/9EaRarDie98Fw1mw6",
+  },
+  GitHub: {
+    DEPLOYMENTS: "https://github.com/sablier-labs/deployments",
+    ORG: "https://github.com/sablier-labs",
+  },
+  APP: "https://app.sablier.com",
+  BLOG: "https://blog.sablier.com",
+  DISCORD: "https://discord.sablier.com",
+  EXAMPLE: "https://app.sablier.com/stream/LL2-11155111-3/",
+};
diff --git a/src/constants/index.ts b/src/constants/index.ts
diff --git a/src/constants/links.ts b/src/constants/links.ts
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "@emotion/styled";
 import Layout from "@theme/Layout";
 import Header from "../components/organisms/Header";
diff --git a/src/theme/MDXComponents/A.js b/src/theme/MDXComponents/A.js
@@ -2,7 +2,7 @@
 import styled from "@emotion/styled";
 import ArrowIcon from "@heroicons/react/24/outline/ArrowTopRightOnSquareIcon";
 import A from "@theme-original/MDXComponents/A";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 
 const Arrow = styled.span`
   display: inline-block;
