Merge pull request #745 from gadget-inc/mill/shadcnTable

Initial readonly pass of Shadcn AutoTable

Author: MillanWangGadget

packages/react/cypress/component/auto/table/PolarisAutoTableEncryptedStringCell.cy.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { PolarisWrapper } from "../../../../cypress/support/auto.js";
 import { PolarisAutoTableEncryptedStringCell } from "../../../../src/auto/polaris/tableCells/PolarisAutoTableEncryptedStringCell.js";
+import { defaultPlaceholderHiddenText } from "../../../../src/auto/shared/defaults.js";
 
 const sampleEncryptedValue = "nice encrypted value here";
 
@@ -9,17 +10,17 @@ describe("PolarisAutoTableEncryptedStringCell", () => {
     cy.mountWithWrapper(<PolarisAutoTableEncryptedStringCell value={sampleEncryptedValue} />, PolarisWrapper);
 
     // Initially hidden
-    cy.contains("•".repeat(sampleEncryptedValue.length)).should("exist");
+    cy.contains(defaultPlaceholderHiddenText).should("exist");
     cy.contains(sampleEncryptedValue).should("not.exist");
 
     // Show
     cy.get(`div[role="EncryptedStringCellShowHideButton"]`).click();
-    cy.contains("•".repeat(sampleEncryptedValue.length)).should("not.exist");
+    cy.contains(defaultPlaceholderHiddenText).should("not.exist");
     cy.contains(sampleEncryptedValue).should("exist");
 
     // Hide again
     cy.get(`div[role="EncryptedStringCellShowHideButton"]`).click();
-    cy.contains("•".repeat(sampleEncryptedValue.length)).should("exist");
+    cy.contains(defaultPlaceholderHiddenText).should("exist");
     cy.contains(sampleEncryptedValue).should("not.exist");
   });
 });

packages/react/package.json

@@ -121,6 +121,9 @@
     "postcss": "^8.4.49",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.7",
+    "@tanstack/react-table": "^8.20.6",
     "setup-polly-jest": "^0.11.0",
     "storybook": "^8.1.6",
     "tailwind-merge": "^2.6.0",

packages/react/spec/auto/polaris/PolarisAutoForm.stories.jsx

@@ -7,7 +7,7 @@ import { PolarisAutoInput } from "../../../src/auto/polaris/inputs/PolarisAutoIn
 import { PolarisAutoSubmit } from "../../../src/auto/polaris/submit/PolarisAutoSubmit.tsx";
 import { FormProvider, useForm } from "../../../src/useActionForm.ts";
 import { testApi as api } from "../../apis.ts";
-import { StorybookErrorBoundary } from "../StorybookErrorBoundary.tsx";
+import { StorybookErrorBoundary } from "../storybook/StorybookErrorBoundary.tsx";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {

packages/react/spec/auto/shadcn-defaults/ShadcnAutoForm.stories.jsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { Provider } from "../../../src/GadgetProvider.tsx";
+import { makeAutocomponents } from "../../../src/auto/shadcn/index.ts";
 import { FormProvider, useForm } from "../../../src/useActionForm.ts";
 import { testApi as api } from "../../apis.ts";
-import { StorybookErrorBoundary } from "../StorybookErrorBoundary.tsx";
-import { makeAutocomponents } from "../../../src/auto/shadcn/index.ts";
-import { elements } from "./index";
+import { StorybookErrorBoundary } from "../storybook/StorybookErrorBoundary.tsx";
+import { elements } from "./index.tsx";
 
 import { makeShadcnAutoInput } from "../../../src/auto/shadcn/inputs/ShadcnAutoInput.tsx";
 import { makeShadcnAutoSubmit } from "../../../src/auto/shadcn/submit/ShadcnAutoSubmit.tsx";
@@ -25,7 +25,7 @@ export default {
         <div style={{ width: "600px", backgroundColor: "white" }}>
           <Provider api={api}>
             <FormProvider {...useForm()}>
-              <StorybookErrorBoundary >
+              <StorybookErrorBoundary>
                 <elements.Card className="p-6 w-full bg-white shadow-lg rounded-lg">
                   <Story />
                 </elements.Card>
@@ -46,8 +46,6 @@ export default {
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
 };
 
-
-
 export const Primary = {
   args: {
     action: api.widget.create,
@@ -118,7 +116,6 @@ export const IncludedWithDefaultValues = {
   },
 };
 
-
 const ConditionalAppearingAutoInput = () => {
   const [showMoreInputs, setShowMoreInputs] = useState(false);
   return (

packages/react/spec/auto/shadcn-defaults/components/Avatar.tsx

@@ -0,0 +1,39 @@
+/**
+ * From https://ui.shadcn.com/docs/components/avatar
+ */
+
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "../utils.js";
+
+const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>>(
+  ({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root ref={ref} className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden", className)} {...props} />
+  )
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };

packages/react/spec/auto/shadcn-defaults/components/Table.tsx

@@ -0,0 +1,62 @@
+/**
+ * File contents from https://ui.shadcn.com/docs/components/table
+ */
+import * as React from "react";
+import { cn } from "../utils.js";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
+  )
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)} {...props} />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+);
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

packages/react/spec/auto/shadcn-defaults/components/Tooltip.tsx

@@ -0,0 +1,35 @@
+/**
+ * File contents from https://ui.shadcn.com/docs/components/tooltip
+ */
+
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import { cn } from "../utils.js";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

packages/react/spec/auto/shadcn-defaults/index.tsx

@@ -1,5 +1,6 @@
 import type { ShadcnElements } from "../../../src/auto/shadcn/elements.js";
 import { Alert, AlertDescription, AlertTitle } from "./components/Alert.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./components/Avatar.js";
 import { Badge } from "./components/Badge.js";
 import { Button } from "./components/Button.js";
 import { Calendar } from "./components/Calendar.js";
@@ -12,46 +13,77 @@ import { Label } from "./components/Label.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./components/Popover.js";
 import { ScrollArea, ScrollBar } from "./components/ScrollArea.js";
 import { Skeleton } from "./components/Skeleton.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/Table.js";
 import { Textarea } from "./components/TextArea.js";
 import { Toaster } from "./components/Toaster.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/Tooltip.js";
 import { toast } from "./hooks/useToast.js";
 import { cn } from "./utils.js";
-export type MergeClassNames = (defaultClassNames: string | string[], userClassName?: string) => string;
 
-export const elements: ShadcnElements & { mergeClassNames: MergeClassNames } = {
+export const elements: ShadcnElements = {
   Alert,
   AlertDescription,
   AlertTitle,
+
   Badge,
+
   Button,
+
   Calendar,
+
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
+
   Checkbox,
+
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
   CommandList,
   CommandSeparator,
+
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
   ScrollArea,
   ScrollBar,
+
   Input,
+
   Label,
   Textarea,
+
   Form,
+
   Skeleton,
+
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+
   toast,
-  mergeClassNames: cn,
+  cn,
 };
 
 export { Toaster };

packages/react/spec/auto/shadcn-defaults/inputs/ShadcnAutoEnumInput.stories.jsx

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import React from "react";
 import { Provider } from "../../../../src/GadgetProvider.tsx";
-import { FormProvider, useForm } from "../../../../src/useActionForm.ts";
-import { testApi as api } from "../../../apis.ts";
-import { StorybookErrorBoundary } from "../../StorybookErrorBoundary.tsx";
 import { makeAutocomponents } from "../../../../src/auto/shadcn/index.ts";
-import { elements } from "../index";
 import { makeShadcnAutoEnumInput } from "../../../../src/auto/shadcn/inputs/ShadcnAutoEnumInput.tsx";
+import { FormProvider, useForm } from "../../../../src/useActionForm.ts";
+import { testApi as api } from "../../../apis.ts";
+import { StorybookErrorBoundary } from "../../storybook/StorybookErrorBoundary.tsx";
+import { elements } from "../index.tsx";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 
@@ -31,7 +31,7 @@ export default {
         <div style={{ width: "600px", backgroundColor: "white" }}>
           <Provider api={api}>
             <FormProvider {...useForm()}>
-              <StorybookErrorBoundary >
+              <StorybookErrorBoundary>
                 <elements.Card className="p-6 w-full bg-white shadow-lg rounded-lg">
                   <Story />
                 </elements.Card>