Merge branch 'main' into 11-10-update_tsdoc_references

gregfromstl · web-flow · commit effd8cba489d · 2024-11-15T15:11:37.000-08:00
diff --git a/apps/dashboard/src/@/components/ui/table.stories.tsx b/apps/dashboard/src/@/components/ui/table.stories.tsx
@@ -9,7 +9,9 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import type { Meta, StoryObj } from "@storybook/react";
+import Link from "next/link";
 import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { cn } from "../../lib/utils";
 import { Badge } from "./badge";
 
 const meta = {
@@ -41,6 +43,10 @@ function Component() {
         <TableDemo />
       </BadgeContainer>
 
+      <BadgeContainer label="Clickable Row">
+        <TableDemo linkBox />
+      </BadgeContainer>
+
       <BadgeContainer label="With Footer">
         <TableDemo footer />
       </BadgeContainer>
@@ -90,6 +96,7 @@ const invoices: Invoice[] = [
 
 function TableDemo(props: {
   footer?: boolean;
+  linkBox?: boolean;
 }) {
   return (
     <TableContainer>
@@ -104,8 +111,21 @@ function TableDemo(props: {
         </TableHeader>
         <TableBody>
           {invoices.map((invoice) => (
-            <TableRow key={invoice.invoice}>
-              <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableRow
+              key={invoice.invoice}
+              linkBox={props.linkBox}
+              className={cn(props.linkBox && "cursor-pointer hover:bg-muted")}
+            >
+              <TableCell className="font-medium">
+                <Link
+                  href={`/invoices/${invoice.invoice}`}
+                  className={cn(
+                    props.linkBox && "before:absolute before:inset-0",
+                  )}
+                >
+                  {invoice.invoice}
+                </Link>
+              </TableCell>
               <TableCell>
                 <Badge>{invoice.paymentStatus}</Badge>
               </TableCell>
diff --git a/apps/dashboard/src/@/components/ui/table.tsx b/apps/dashboard/src/@/components/ui/table.tsx
@@ -63,12 +63,19 @@ TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+  React.HTMLAttributes<HTMLTableRowElement> & {
+    /**
+     * Contain the absolutely position elements inside the row with position:relative + transform:translate(0)
+     * transform:translate(0) is required because position:relative on tr element does not work on webkit
+     */
+    linkBox?: boolean;
+  }
+>(({ className, linkBox, ...props }, ref) => (
   <tr
     ref={ref}
     className={cn(
       "border-border border-b last:border-0 data-[state=selected]:bg-muted",
+      linkBox && "relative translate-x-0 translate-y-0",
       className,
     )}
     {...props}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-row.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-row.tsx
@@ -39,7 +39,7 @@ export async function ChainListRow({
 }: ChainListRowProps) {
   const chainMetadata = await getChainMetadata(chainId);
   return (
-    <TableRow className="relative hover:bg-muted/50">
+    <TableRow linkBox className="hover:bg-muted/50">
       <TableCell>{favoriteButton}</TableCell>
       {/* Name */}
       <TableCell>
diff --git a/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/PublishedContractTable.tsx b/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/PublishedContractTable.tsx
@@ -190,7 +190,8 @@ function ContractTableRow(props: {
   return (
     <>
       <TableRow
-        className="relative cursor-pointer hover:bg-muted/50"
+        linkBox
+        className="cursor-pointer hover:bg-muted/50"
         {...rowProps}
         key={key}
       >
diff --git a/apps/dashboard/src/app/(dashboard)/trending/components/trending-table.tsx b/apps/dashboard/src/app/(dashboard)/trending/components/trending-table.tsx
@@ -75,7 +75,8 @@ export function TrendingContractSection(props: {
             <TableBody>
               {props.topContracts.map((contract, index) => (
                 <TableRow
-                  className="relative hover:bg-muted/50"
+                  linkBox
+                  className="hover:bg-muted/50"
                   key={`${contract.chainMetadata.chainId}${contract.contractAddress}${index}`}
                 >
                   {/* Rank */}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/partners-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/partners-table.tsx
@@ -78,10 +78,8 @@ function PartnerRow(props: {
 
   return (
     <TableRow
-      className={cn(
-        "relative hover:bg-muted/50",
-        isDeleting && "animate-pulse",
-      )}
+      linkBox
+      className={cn("hover:bg-muted/50", isDeleting && "animate-pulse")}
     >
       <TableCell className="max-w-32 truncate align-center">
         {props.partner.name}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx
@@ -168,7 +168,8 @@ export const EngineInstancesTable: React.FC<EngineInstancesTableProps> = ({
             isDestructive: true,
           },
         ]}
-        bodyRowClassName="hover:bg-muted/50 relative"
+        bodyRowClassName="hover:bg-muted/50"
+        bodyRowLinkBox
       />
 
       {instanceToUpdate && (
diff --git a/apps/dashboard/src/components/contract-components/contract-table/index.tsx b/apps/dashboard/src/components/contract-components/contract-table/index.tsx
@@ -54,7 +54,8 @@ export async function DeployableContractTable(
           {deployedContractMetadata.map((metadata, i) => {
             return (
               <TableRow
-                className="relative cursor-pointer hover:bg-muted/50"
+                linkBox
+                className="cursor-pointer hover:bg-muted/50"
                 // biome-ignore lint/suspicious/noArrayIndexKey: static list
                 key={i}
               >
diff --git a/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx b/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx
@@ -358,7 +358,8 @@ const ContractTableRow = memo(({ row }: { row: Row<BasicContract> }) => {
     <TableRow
       {...rowProps}
       role="group"
-      className="relative cursor-pointer hover:bg-muted/50"
+      linkBox
+      className="cursor-pointer hover:bg-muted/50"
     >
       {row.cells.map((cell, cellIndex) => {
         return (
diff --git a/apps/dashboard/src/components/shared/TWTable.tsx b/apps/dashboard/src/components/shared/TWTable.tsx
@@ -55,6 +55,7 @@ type TWTableProps<TRowData> = {
   };
   title: string;
   bodyRowClassName?: string;
+  bodyRowLinkBox?: boolean;
 };
 
 export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
@@ -174,6 +175,7 @@ export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
                     }
                   : {})}
                 className={tableProps.bodyRowClassName}
+                linkBox={tableProps.bodyRowLinkBox}
               >
                 {row.getVisibleCells().map((cell) => {
                   return (
diff --git a/apps/portal/src/components/Document/ContractDeployCard.tsx b/apps/portal/src/components/Document/ContractDeployCard.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { Paragraph } from "./Paragraph";
+
+/**
+ * Usage:
+ * ```tsx
+ * <ContractDeployCard contractName={"ERC20Modular"} href="deploy-link" />
+ * ```
+ */
+export function ContractDeployCard(props: {
+  contractName: string;
+  description?: string;
+  href: string;
+}) {
+  return (
+    <div className="my-4 rounded-lg border bg-b-800 p-4">
+      <div className="mb-2 font-semibold text-lg ">
+        Deploy {props.contractName}
+      </div>
+      <Paragraph className="mb-5 text-base text-f-300">
+        {props.description ||
+          `The ${props.contractName} is available to deploy on Explore. Deploy it now through dashboard.`}
+      </Paragraph>
+      <div className="flex">
+        <Link
+          href={props.href}
+          target="_blank"
+          className="inline-flex items-center rounded-lg border bg-[#DB2877] text-sm duration-200 hover:border-f-300"
+        >
+          <div className="border-l-2 p-2.5 font-semibold">Deploy Now</div>
+        </Link>
+      </div>
+    </div>
+  );
+}

Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,7 @@ type TWTableProps<TRowData> = {`
`55`	`55`	`};`
`56`	`56`	`title: string;`
`57`	`57`	`bodyRowClassName?: string;`
	`58`	`+ bodyRowLinkBox?: boolean;`
`58`	`59`	`};`
`59`	`60`
`60`	`61`	`export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {`
`@@ -174,6 +175,7 @@ export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {`
`174`	`175`	`}`
`175`	`176`	`: {})}`
`176`	`177`	`className={tableProps.bodyRowClassName}`
	`178`	`+ linkBox={tableProps.bodyRowLinkBox}`
`177`	`179`	`>`
`178`	`180`	`{row.getVisibleCells().map((cell) => {`
`179`	`181`	`return (`