@flamingo-stack/openframe-frontend-core 0.0.267 → 0.0.268-snapshot.20260615081103

package/src/components/ui/no-data/no-data-message.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+
+import { cn } from "../../../utils/cn"
+import { noDataIconClasses } from "./no-data-styles"
+
+interface NoDataMessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Leading glyph, sized to 16px (mobile) / 24px (md+). Optional. */
+  icon?: React.ReactNode
+  /** Primary line (body size). */
+  title?: React.ReactNode
+  /** Secondary line (caption size). */
+  description?: React.ReactNode
+}
+
+/**
+ * A transparent, centered stack of an icon, a title and a description, in muted
+ * gray. Any piece is optional, so it also covers "icon + title", "title only",
+ * and similar reduced forms.
+ */
+const NoDataMessage = React.forwardRef<HTMLDivElement, NoDataMessageProps>(
+  function NoDataMessage({ icon, title, description, className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col items-center gap-[var(--spacing-system-l)] text-center text-ods-text-secondary",
+          className,
+        )}
+        {...props}
+      >
+        {icon && <span className={noDataIconClasses}>{icon}</span>}
+        {(title || description) && (
+          <div className="flex flex-col">
+            {title && <p className="text-h4 break-words">{title}</p>}
+            {description && <p className="text-h6 break-words">{description}</p>}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+
+export { NoDataMessage, type NoDataMessageProps }

package/src/components/ui/no-data/no-data-styles.ts

@@ -0,0 +1,36 @@
+// Shared style atoms for the NoData (empty-state) family. Mirrors the approach
+// used by `button-styles.ts`: a single source of truth for the icon scale, the
+// block-group surface and the interactive/disabled treatment, expressed as
+// reusable class atoms so new looks can be added without touching the markup.
+
+import { cva, type VariantProps } from "class-variance-authority"
+
+// Leading-icon glyph scale: 16px on mobile, 24px on md+. Color is intentionally
+// omitted so the glyph inherits the current text color (and dims with it when
+// the block is disabled).
+export const noDataIconClasses =
+  "inline-flex shrink-0 items-center justify-center [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6"
+
+// Surface for the action-block group container: a card-colored panel with a
+// border and rounded corners. `overflow-hidden` keeps only the outer blocks
+// round — inner blocks stay square.
+export const noDataActionsVariants = cva("overflow-hidden rounded-md", {
+  variants: {
+    variant: {
+      outline: "bg-ods-card border border-ods-border",
+    },
+  },
+  defaultVariants: { variant: "outline" },
+})
+
+export type NoDataActionsVariant = NonNullable<
+  VariantProps<typeof noDataActionsVariants>["variant"]
+>
+
+// Interactive treatment for a clickable block: hover/active surface tints, a
+// keyboard focus ring, and a disabled state that grays the text and stops
+// pointer interaction — matching the disabled outline button.
+export const noDataActionInteractiveClasses =
+  "cursor-pointer transition-colors hover:bg-ods-bg-hover active:bg-ods-bg-active " +
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:ring-inset " +
+  "disabled:cursor-default disabled:pointer-events-none disabled:text-ods-text-disabled"

package/src/components/ui/no-data/no-data.tsx

@@ -0,0 +1,84 @@
+import React from "react"
+
+import { cn } from "../../../utils/cn"
+import { Button, type ButtonProps } from "../button"
+import { NoDataMessage } from "./no-data-message"
+import { NoDataActions, type NoDataActionProps } from "./no-data-actions"
+
+interface NoDataProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  // --- Message ---
+  /** Leading glyph, sized to 16px (mobile) / 24px (md+). */
+  icon?: React.ReactNode
+  /** Primary line. */
+  title?: React.ReactNode
+  /** Secondary line. */
+  description?: React.ReactNode
+
+  // --- Clickable blocks ---
+  /** Clickable blocks. Dynamic count. Hidden when empty/omitted. */
+  actions?: NoDataActionProps[]
+
+  // --- Footer button ---
+  /** Footer button label. When set (and `button` is not), renders the button. */
+  buttonLabel?: React.ReactNode
+  /** Leading icon for the footer button. */
+  buttonIcon?: React.ReactNode
+  /** Click handler for the footer button. */
+  onButtonClick?: ButtonProps["onClick"]
+  /** Extra props forwarded to the footer button (variant, href, loading, …). */
+  buttonProps?: Partial<ButtonProps>
+  /** Fully custom footer node; overrides the `buttonLabel`/`buttonIcon` path. */
+  button?: React.ReactNode
+}
+
+/**
+ * A centered empty-state panel: a muted icon/title/description message, an
+ * optional group of clickable blocks, and an optional footer button, stacked
+ * vertically with breakpoint-aware spacing. Each region renders only when its
+ * inputs are present, so the same component covers a bare message, a message
+ * with a button, the full layout, and everything in between.
+ */
+const NoData = React.forwardRef<HTMLDivElement, NoDataProps>(function NoData(
+  {
+    icon,
+    title,
+    description,
+    actions,
+    buttonLabel,
+    buttonIcon,
+    onButtonClick,
+    buttonProps,
+    button,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const hasMessage = !!(icon || title || description)
+  const hasActions = !!actions?.length
+
+  const footerButton =
+    button ??
+    (buttonLabel != null ? (
+      <Button variant="outline" leftIcon={buttonIcon} onClick={onButtonClick} {...buttonProps}>
+        {buttonLabel}
+      </Button>
+    ) : null)
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex w-full flex-col items-center justify-center gap-[var(--spacing-system-l)] p-[var(--spacing-system-l)]",
+        className,
+      )}
+      {...props}
+    >
+      {hasMessage && <NoDataMessage icon={icon} title={title} description={description} />}
+      {hasActions && <NoDataActions actions={actions} />}
+      {footerButton}
+    </div>
+  )
+})
+
+export { NoData, type NoDataProps }

package/src/stories/EmptyState.stories.tsx

@@ -0,0 +1,207 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Database, FileText, Inbox, Plus, Search, Settings, Sparkles, Upload, Zap } from 'lucide-react';
+import React from 'react';
+import { Button } from '../components/ui/button';
+import { NoData, NoDataAction, NoDataActions, NoDataMessage } from '../components/ui/no-data';
+
+const meta = {
+  title: 'UI/EmptyState',
+  component: NoData,
+  argTypes: {
+    icon: { control: false },
+    actions: { control: false },
+    button: { control: false },
+    buttonIcon: { control: false },
+    onButtonClick: { control: false },
+    buttonProps: { control: false },
+    title: { control: 'text' },
+    description: { control: 'text' },
+    buttonLabel: { control: 'text' },
+  },
+} satisfies Meta<typeof NoData>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const noop = () => {};
+
+const defaultActions = [
+  { icon: <Zap />, label: 'Feature Description', onClick: noop },
+  { icon: <Sparkles />, label: 'Feature Description', onClick: noop },
+  { icon: <Database />, label: 'Feature Description', onClick: noop },
+];
+
+// === Full composition ===
+
+export const Default: Story = {
+  args: {
+    icon: <Inbox />,
+    title: 'No data available',
+    description: 'Start by adding an item',
+    actions: defaultActions,
+    buttonLabel: 'Ask Mingo about Item',
+    buttonIcon: <Sparkles />,
+    onButtonClick: noop,
+  },
+};
+
+// === Reduced message ===
+
+export const MessageTitleOnly: Story = {
+  args: {
+    icon: <Search />,
+    title: 'No results found',
+  },
+};
+
+// === Without one region ===
+
+export const WithoutActions: Story = {
+  args: {
+    icon: <Inbox />,
+    title: 'No data available',
+    description: 'Start by adding an item',
+    buttonLabel: 'Add item',
+    buttonIcon: <Plus />,
+    onButtonClick: noop,
+  },
+};
+
+export const WithoutButton: Story = {
+  args: {
+    icon: <Inbox />,
+    title: 'No data available',
+    description: 'Start by adding an item',
+    actions: defaultActions,
+  },
+};
+
+// === Dynamic block count ===
+
+export const TwoActions: Story = {
+  args: {
+    icon: <Database />,
+    title: 'No data available',
+    description: 'Start by adding an item',
+    actions: [
+      { icon: <Zap />, label: 'Feature Description', onClick: noop },
+      { icon: <Sparkles />, label: 'Feature Description', onClick: noop },
+    ],
+    buttonLabel: 'Ask Mingo about Item',
+    buttonIcon: <Sparkles />,
+    onButtonClick: noop,
+  },
+};
+
+export const FourActions: Story = {
+  args: {
+    icon: <Database />,
+    title: 'No data available',
+    description: 'Start by adding an item',
+    actions: [
+      { icon: <Zap />, label: 'Real-time sync', onClick: noop },
+      { icon: <Sparkles />, label: 'Smart suggestions', onClick: noop },
+      { icon: <Database />, label: 'Unlimited storage', onClick: noop },
+      { icon: <FileText />, label: 'Export anywhere', onClick: noop },
+    ],
+    buttonLabel: 'Ask Mingo about Item',
+    buttonIcon: <Sparkles />,
+    onButtonClick: noop,
+  },
+};
+
+// === Disabled blocks ===
+
+export const DisabledActions: Story = {
+  args: {
+    icon: <Inbox />,
+    title: 'No data available',
+    description: 'Some actions are unavailable',
+    actions: [
+      { icon: <Zap />, label: 'Available', onClick: noop },
+      { icon: <Sparkles />, label: 'Disabled', onClick: noop, disabled: true },
+      { icon: <Database />, label: 'Disabled', onClick: noop, disabled: true },
+    ],
+    buttonLabel: 'Ask Mingo about Item',
+    buttonIcon: <Sparkles />,
+    onButtonClick: noop,
+  },
+};
+
+// === Footer button variations ===
+
+export const ButtonAsLink: Story = {
+  args: {
+    icon: <Upload />,
+    title: 'No data available',
+    description: 'Import your first dataset',
+    buttonLabel: 'View docs',
+    buttonIcon: <FileText />,
+    buttonProps: { href: '/docs' },
+  },
+};
+
+export const CustomButton: Story = {
+  args: {
+    icon: <Settings />,
+    title: 'No data available',
+    description: 'Configure a source to get started',
+    // `button` is the escape hatch — pass any node.
+    button: (
+      <div className="flex gap-2">
+        <Button variant="outline" leftIcon={<Plus />}>Connect source</Button>
+        <Button variant="transparent" leftIcon={<FileText />}>View docs</Button>
+      </div>
+    ),
+  },
+};
+
+// === Standalone parts ===
+
+export const StandaloneActions: Story = {
+  args: { title: '' },
+  render: () => (
+    <NoDataActions>
+      <NoDataAction icon={<Zap />} label="Clickable block" onClick={noop} />
+      <NoDataAction icon={<Sparkles />} label="Clickable block" onClick={noop} />
+      <NoDataAction icon={<Database />} label="Disabled block" onClick={noop} disabled />
+    </NoDataActions>
+  ),
+};
+
+export const StandaloneMessage: Story = {
+  args: { title: '' },
+  render: () => (
+    <NoDataMessage
+      icon={<Search />}
+      title="No results found"
+      description="Try adjusting your filters"
+    />
+  ),
+};
+
+// === Showcase ===
+
+export const Showcase: Story = {
+  args: { title: '' },
+  render: () => (
+    <div className="flex flex-col items-stretch gap-12">
+      <NoData
+        icon={<Inbox />}
+        title="No data available"
+        description="Start by adding an item"
+        actions={defaultActions}
+        buttonLabel="Ask Mingo about Item"
+        buttonIcon={<Sparkles />}
+        onButtonClick={noop}
+      />
+      <NoData icon={<Search />} title="No results found" description="Try a different search" />
+      <NoData
+        icon={<Database />}
+        title="No data available"
+        description="Start by adding an item"
+        actions={defaultActions}
+      />
+    </div>
+  ),
+};

package/src/types/platform.ts

@@ -11,6 +11,12 @@ export interface PlatformRecord {
   description?: string;
   is_active: boolean;
   is_internal: boolean; // Whether this is an internal admin platform vs public-facing
+  // Universal-viewer: when true, content DALs return ALL platforms' rows (applyFilter=false),
+  // decoupled from is_internal. Read by getPlatformContentScopeMode (hub lib/platform-utils.ts).
+  serves_all_content: boolean;
+  // When false, skip activity-tracking + HubSpot sync for this platform's principals
+  // (formerly keyed on is_internal). Read by platformTracksActivity (hub lib/platform-utils.ts).
+  tracks_activity: boolean;
   // Chat (Ask AI) wiring — populated only for platforms that host a chat surface.
   // `chat_source_id` is the doc-source binding (`chat_admin_personas.chat_source_id`).
   // `chat_source_rag_tables_version` is the per-platform RAG-table override version