Widgets

// From packages/widgets/src/app/index.ts:18
const createOptions = (settings) => ({
  // Select which app to display
  appId: factory.app(),
  
  // Open links in new tab
  openInNewTab: factory.switch({ defaultValue: true }),
  
  // Show app name
  showTitle: factory.switch({ defaultValue: true }),
  
  // Description display mode
  descriptionDisplayMode: factory.select({
    options: ["normal", "tooltip", "hidden"],
    defaultValue: "hidden"
  }),
  
  // Layout direction
  layout: factory.select({
    options: ["column", "column-reverse", "row", "row-reverse"],
    defaultValue: "column"
  }),
  
  // Enable status monitoring
  pingEnabled: factory.switch({ 
    defaultValue: settings.enableStatusByDefault 
  })
});

// From packages/widgets/src/calendar/index.ts:34
export const definition = createWidgetDefinition("calendar", {
  icon: IconCalendar,
  supportedIntegrations: getIntegrationKindsByCategory("calendar"),
  integrationsRequired: false, // Optional: can work without integration
  createOptions() { /* ... */ }
});

// Widgets use tRPC queries for real-time data
const { data, error, isLoading } = clientApi.widget.getData.useQuery({
  widgetId: itemId,
  integrationIds
});

// From widget prefetch pattern
export const prefetch: Prefetch<WidgetKind> = async (
  queryClient,
  items
) => {
  await Promise.all(
    items.map(async ({ options, integrationIds }) => {
      await queryClient.prefetchQuery({
        queryKey: ['widget', options, integrationIds],
        queryFn: () => fetchWidgetData(options, integrationIds)
      });
    })
  );
};

// From packages/widgets/src/definition.ts:66
interface WidgetComponentProps {
  // Widget configuration
  options: WidgetOptions;
  integrationIds: string[];
  itemId: string | undefined; // undefined in preview mode
  
  // Board context
  boardId: string | undefined; // undefined in preview mode
  isEditMode: boolean;
  
  // Option updates
  setOptions: ({ newOptions }) => void;
  
  // Dimensions
  width: number;
  height: number;
}

// From packages/widgets/src/bookmarks/index.tsx:27
items: factory.sortableItemList({
  ItemComponent: ({ item, handle: Handle, removeItem, rootAttributes }) => (
    <Group {...rootAttributes} justify="space-between">
      <Group>
        <Handle />
        <Avatar src={item.iconUrl} alt={item.name} />
        <Text>{item.name}</Text>
      </Group>
      <ActionIcon variant="transparent" color="red" onClick={removeItem}>
        <IconX size={20} />
      </ActionIcon>
    </Group>
  ),
  AddButton: CustomAddButton,
  uniqueIdentifier: (item) => item.id,
  useData: (initialIds) => {
    const { data } = clientApi.app.byIds.useQuery(initialIds);
    return { data };
  }
})

// App selector input
appId: factory.app()

// Integration selector (automatic based on supportedIntegrations)
// Passed as integrationIds prop to widget

// From packages/widgets/src/app/index.ts:97
errors: {
  NOT_FOUND: {
    icon: IconDeviceDesktopX,
    message: (t) => t("widget.app.error.notFound.label"),
    hideLogsLink: true
  }
}

// Widget definition pattern
export const { definition, componentLoader } = createWidgetDefinition(
  "widgetKind",
  {
    icon: IconComponent,
    supportedIntegrations: ["integration1", "integration2"],
    integrationsRequired: true,
    createOptions: (settings) => optionsBuilder.from(
      (factory) => ({
        // Define options here
      })
    )
  }
).withDynamicImport(() => import("./component"));