@gram-ai/elements 1.27.3 → 1.27.5

package/src/components/ui/generative-ui.tsx

@@ -1,10 +1,10 @@
-'use client'
+"use client";
 
-import { useDensity } from '@/hooks/useDensity'
-import { cn } from '@/lib/utils'
-import { isJsonRenderTree, type JsonRenderNode } from '@/lib/generative-ui'
-import { AlertCircleIcon } from 'lucide-react'
-import { FC, useMemo } from 'react'
+import { useDensity } from "@/hooks/useDensity";
+import { cn } from "@/lib/utils";
+import { isJsonRenderTree, type JsonRenderNode } from "@/lib/generative-ui";
+import { AlertCircleIcon } from "lucide-react";
+import { FC, useMemo } from "react";
 
 // Import all components from the generative-ui plugin ui directory
 import {
@@ -30,13 +30,13 @@ import {
   TabsWrapper,
   TabContentWrapper,
   Text,
-} from '@/plugins/generative-ui/ui'
+} from "@/plugins/generative-ui/ui";
 
 interface GenerativeUIProps {
   /** The JSON content to render - can be a json-render tree or raw object */
-  content: unknown
+  content: unknown;
   /** Additional class names */
-  className?: string
+  className?: string;
 }
 
 /**
@@ -76,29 +76,29 @@ const components: Record<string, FC<any>> = {
   Input: InputWrapper,
   Checkbox: CheckboxWrapper,
   Select: SelectWrapper,
-}
+};
 
 /**
  * Recursively render a json-render tree node
  */
 function renderNode(node: JsonRenderNode, key?: number): React.ReactNode {
-  const Component = components[node.type]
+  const Component = components[node.type];
 
   if (!Component) {
     // Unknown component type - render as debug info
     return (
-      <div key={key} className="text-muted-foreground text-xs">
+      <div key={key} className="text-xs text-muted-foreground">
         Unknown component: {node.type}
       </div>
-    )
+    );
   }
 
   // Recursively render children (ensure it's an array)
   const children = Array.isArray(node.children)
     ? node.children.map((child, i) => renderNode(child, i))
-    : undefined
+    : undefined;
 
-  return <Component key={key} {...(node.props ?? {})} children={children} />
+  return <Component key={key} {...(node.props ?? {})} children={children} />;
 }
 
 /**
@@ -106,32 +106,32 @@ function renderNode(node: JsonRenderNode, key?: number): React.ReactNode {
  * This is used by the generativeUI plugin to render `ui` code blocks.
  */
 export const GenerativeUI: FC<GenerativeUIProps> = ({ content, className }) => {
-  const d = useDensity()
+  const d = useDensity();
 
   // Check if content is a valid json-render tree
   const tree = useMemo(() => {
     if (isJsonRenderTree(content)) {
-      return content
+      return content;
     }
-    return null
-  }, [content])
+    return null;
+  }, [content]);
 
   if (!tree) {
     return (
       <div
         className={cn(
-          'text-muted-foreground flex items-center gap-2 text-sm',
-          d('p-md'),
-          className
+          "flex items-center gap-2 text-sm text-muted-foreground",
+          d("p-md"),
+          className,
         )}
       >
         <AlertCircleIcon className="size-4" />
         <span>Invalid generative UI structure</span>
       </div>
-    )
+    );
   }
 
-  return <div className={cn('w-full', className)}>{renderNode(tree)}</div>
-}
+  return <div className={cn("w-full", className)}>{renderNode(tree)}</div>;
+};
 
-export type { GenerativeUIProps }
+export type { GenerativeUIProps };

package/src/components/ui/popover.tsx

@@ -1,31 +1,31 @@
-import * as React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from '@/lib/utils'
-import { usePortalContainer } from '@/hooks/usePortalContainer'
+import { cn } from "@/lib/utils";
+import { usePortalContainer } from "@/hooks/usePortalContainer";
 
 function Popover({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 function PopoverTrigger({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
   className,
-  align = 'center',
+  align = "center",
   sideOffset = 4,
   container,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
-  container?: HTMLElement | null
+  container?: HTMLElement | null;
 }) {
-  const portalContainer = usePortalContainer()
+  const portalContainer = usePortalContainer();
   return (
     <PopoverPrimitive.Portal container={container ?? portalContainer}>
       <PopoverPrimitive.Content
@@ -33,19 +33,19 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-[70] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className
+          "z-[70] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className,
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-  )
+  );
 }
 
 function PopoverAnchor({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/components/ui/skeleton.tsx

@@ -1,13 +1,13 @@
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 
-function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn('bg-accent animate-pulse rounded-md', className)}
+      className={cn("animate-pulse rounded-md bg-accent", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };

package/src/components/ui/time-range-picker.stories.tsx

@@ -1,40 +1,40 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { useState } from 'react'
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
 import {
   TimeRangePicker,
   type TimeRange,
   type DateRangePreset,
-} from './time-range-picker'
+} from "./time-range-picker";
 
 const meta: Meta<typeof TimeRangePicker> = {
-  title: 'UI/TimeRangePicker',
+  title: "UI/TimeRangePicker",
   component: TimeRangePicker,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
-    layout: 'centered',
+    layout: "centered",
   },
   decorators: [
     (Story) => (
-      <div className="gram-elements bg-background text-foreground min-w-[400px] p-8">
+      <div className="gram-elements min-w-[400px] bg-background p-8 text-foreground">
         <Story />
       </div>
     ),
   ],
   argTypes: {
     showLive: {
-      control: 'boolean',
+      control: "boolean",
     },
     disabled: {
-      control: 'boolean',
+      control: "boolean",
     },
     timezone: {
-      control: 'text',
+      control: "text",
     },
   },
-}
+};
 
-export default meta
-type Story = StoryObj<typeof TimeRangePicker>
+export default meta;
+type Story = StoryObj<typeof TimeRangePicker>;
 
 /**
  * Default time range picker with preset badges and calendar.
@@ -42,103 +42,103 @@ type Story = StoryObj<typeof TimeRangePicker>
  */
 export const Default: Story = {
   render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>('7d')
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null)
+    const [preset, setPreset] = useState<DateRangePreset | null>("7d");
+    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
 
     return (
       <TimeRangePicker
         preset={customRange ? null : preset}
         customRange={customRange}
         onPresetChange={(p) => {
-          setPreset(p)
-          setCustomRange(null)
+          setPreset(p);
+          setCustomRange(null);
         }}
         onCustomRangeChange={(from, to, label) => {
-          setCustomRange({ from, to })
-          setPreset(null)
-          console.log('Custom range:', { from, to, label })
+          setCustomRange({ from, to });
+          setPreset(null);
+          console.log("Custom range:", { from, to, label });
         }}
         onClearCustomRange={() => {
-          setCustomRange(null)
-          setPreset('7d')
+          setCustomRange(null);
+          setPreset("7d");
         }}
       />
-    )
+    );
   },
-}
+};
 
 /**
  * Time range picker with timezone indicator.
  */
 export const WithTimezone: Story = {
   render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>('30d')
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null)
+    const [preset, setPreset] = useState<DateRangePreset | null>("30d");
+    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
 
     return (
       <TimeRangePicker
         preset={customRange ? null : preset}
         customRange={customRange}
         onPresetChange={(p) => {
-          setPreset(p)
-          setCustomRange(null)
+          setPreset(p);
+          setCustomRange(null);
         }}
         onCustomRangeChange={(from, to) => {
-          setCustomRange({ from, to })
-          setPreset(null)
+          setCustomRange({ from, to });
+          setPreset(null);
         }}
         onClearCustomRange={() => {
-          setCustomRange(null)
-          setPreset('30d')
+          setCustomRange(null);
+          setPreset("30d");
         }}
         timezone="UTC-08:00"
       />
-    )
+    );
   },
-}
+};
 
 /**
  * With LIVE mode toggle enabled.
  */
 export const WithLiveMode: Story = {
   render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>('15m')
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null)
-    const [isLive, setIsLive] = useState(true)
+    const [preset, setPreset] = useState<DateRangePreset | null>("15m");
+    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+    const [isLive, setIsLive] = useState(true);
 
     return (
       <TimeRangePicker
         preset={customRange ? null : preset}
         customRange={customRange}
         onPresetChange={(p) => {
-          setPreset(p)
-          setCustomRange(null)
+          setPreset(p);
+          setCustomRange(null);
         }}
         onCustomRangeChange={(from, to) => {
-          setCustomRange({ from, to })
-          setPreset(null)
+          setCustomRange({ from, to });
+          setPreset(null);
         }}
         onClearCustomRange={() => {
-          setCustomRange(null)
-          setPreset('15m')
+          setCustomRange(null);
+          setPreset("15m");
         }}
         showLive
         isLive={isLive}
         onLiveChange={setIsLive}
       />
-    )
+    );
   },
-}
+};
 
 /**
  * Disabled state.
  */
 export const Disabled: Story = {
   args: {
-    preset: '7d',
+    preset: "7d",
     disabled: true,
   },
-}
+};
 
 /**
  * Full Datadog-style configuration with all features.
@@ -146,10 +146,10 @@ export const Disabled: Story = {
  */
 export const DatadogStyle: Story = {
   render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>('7d')
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null)
-    const [customLabel, setCustomLabel] = useState<string | null>(null)
-    const [isLive, setIsLive] = useState(false)
+    const [preset, setPreset] = useState<DateRangePreset | null>("7d");
+    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+    const [customLabel, setCustomLabel] = useState<string | null>(null);
+    const [isLive, setIsLive] = useState(false);
 
     return (
       <div className="space-y-4">
@@ -158,26 +158,26 @@ export const DatadogStyle: Story = {
           customRange={customRange}
           customRangeLabel={customLabel}
           onPresetChange={(p) => {
-            setPreset(p)
-            setCustomRange(null)
-            setCustomLabel(null)
+            setPreset(p);
+            setCustomRange(null);
+            setCustomLabel(null);
           }}
           onCustomRangeChange={(from, to, label) => {
-            setCustomRange({ from, to })
-            setPreset(null)
-            setCustomLabel(label || null)
+            setCustomRange({ from, to });
+            setPreset(null);
+            setCustomLabel(label || null);
           }}
           onClearCustomRange={() => {
-            setCustomRange(null)
-            setPreset('7d')
-            setCustomLabel(null)
+            setCustomRange(null);
+            setPreset("7d");
+            setCustomLabel(null);
           }}
           showLive
           isLive={isLive}
           onLiveChange={setIsLive}
           timezone="UTC-08:00"
         />
-        <div className="text-muted-foreground bg-muted rounded-md p-3 text-xs">
+        <div className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
           <strong>Current state:</strong>
           <pre className="mt-1 overflow-auto">
             {JSON.stringify(
@@ -193,14 +193,14 @@ export const DatadogStyle: Story = {
                 isLive,
               },
               null,
-              2
+              2,
             )}
           </pre>
         </div>
       </div>
-    )
+    );
   },
-}
+};
 
 /**
  * Natural language parsing demo.
@@ -213,13 +213,13 @@ export const DatadogStyle: Story = {
  */
 export const NaturalLanguageParsing: Story = {
   render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>('30d')
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null)
-    const [customLabel, setCustomLabel] = useState<string | null>(null)
+    const [preset, setPreset] = useState<DateRangePreset | null>("30d");
+    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+    const [customLabel, setCustomLabel] = useState<string | null>(null);
 
     return (
       <div className="space-y-4">
-        <p className="text-muted-foreground text-sm">
+        <p className="text-sm text-muted-foreground">
           Try typing: "yesterday", "3 days ago", "last Wednesday", "January"
         </p>
         <TimeRangePicker
@@ -227,23 +227,23 @@ export const NaturalLanguageParsing: Story = {
           customRange={customRange}
           customRangeLabel={customLabel}
           onPresetChange={(p) => {
-            setPreset(p)
-            setCustomRange(null)
-            setCustomLabel(null)
+            setPreset(p);
+            setCustomRange(null);
+            setCustomLabel(null);
           }}
           onCustomRangeChange={(from, to, label) => {
-            setCustomRange({ from, to })
-            setPreset(null)
-            setCustomLabel(label || null)
-            console.log('AI parsed:', { from, to, label })
+            setCustomRange({ from, to });
+            setPreset(null);
+            setCustomLabel(label || null);
+            console.log("AI parsed:", { from, to, label });
           }}
           onClearCustomRange={() => {
-            setCustomRange(null)
-            setPreset('30d')
-            setCustomLabel(null)
+            setCustomRange(null);
+            setPreset("30d");
+            setCustomLabel(null);
           }}
         />
       </div>
-    )
+    );
   },
-}
+};