widget-js/widgets

The widget-js/widgets ecosystem consists of several specialized component packages. You can find individual repositories for each category:

• AI Components: DeepSeek, ChatGPT, and Gemini integration (rtugeek/ai).
• Monitoring Components: Dashboard, energy labels, and server monitoring (rtugeek/monitor).
• Default Components: Countdown, Dynamic Island, Labor Progress, and Time Progress (widget-js/widgets).
• Grid/Folder Components: Layout management (rtugeek/grid).
• iTime Components: Todo lists, Deadlines, Pomodoro, and Calendars (rtugeek/itime-web).
• Clipboard Components: Clipboard management (rtugeek/clipboard).
• Weather Components: Various sizes (2x2, 4x2, 4x4) (rtugeek/weather).
• Hotspot Components: Trending searches for Bilibili, Weibo, Douyin, Zhihu, and Bangumi (widget-js/hotspot).
• Clock Components: Flip clock, standard clock, Glitch clock, and Micky clock (rtugeek/clock).
• Photo Components: Stickers and slideshow albums (rtugeek/photo).
• Fun Components: Electronic Wooden Fish and Dashboards (rtugeek/fun).

This project uses @antfu/eslint-config for linting and code style enforcement. The configuration is set up for a library (type: 'lib') with support for TypeScript, React, and JSX.

Key configuration areas include:

• Stylistic settings: Controls indentation (2 spaces) and quote type ('single').
• Language support: Enables typescript, react, and jsx; disables vue, jsonc, yaml, and markdown.
• Ignores: The following paths are excluded from linting:
  • **/fixtures
  • src/components/ui/**
• Custom Rules: Specific overrides are applied for code style (e.g., curly, style/max-statements-per-line) and TypeScript usage (e.g., disabling ts/explicit-function-return-type).

import antfu from '@antfu/eslint-config'

export default antfu({
  type: 'lib',
  stylistic: {
    indent: 2,
    quotes: 'single',
  },
  typescript: true,
  react: true,
  jsx: true,
  vue: false,
  jsonc: false,
  yaml: false,
  markdown: false,
  ignores: [
    '**/fixtures',
    'src/components/ui/**',
  ],
  rules: {
    'curly': ['error', 'multi-line'],
    'no-use-before-define': 'off',
    'eqeqeq': 'off',
    'ts/ban-ts-comment': 'off',
    'unused-imports/no-unused-vars': ['error', {
      caughtErrors: 'none',
      argsIgnorePattern: '^_',
      varsIgnorePattern: '^_',
    }],
    'ts/explicit-function-return-type': 'off',
    'style/max-statements-per-line': ['error', {
      max: 2,
    }],
  },
})

The WidgetTags component is a UI element used for selecting or filtering widget categories via a horizontal list of pill-shaped buttons. It manages a single string value representing the selected tag and provides an onChange callback when a user selects a different category.

Available Tags

The component uses the following internal values for its tags:

• '' (All)
• 'ai' (AI)
• 'utilities' (Utilities)
• 'productivity' (Productivity)
• 'news' (News)
• 'weather' (Weather)
• 'fun' (Fun)
• 'calendar' (Calendar)
• 'time' (Time)
• 'finance' (Finance)
• 'installed' (Installed)

import { WidgetTags } from '@/pages/add/components/widget-tags'

// Example usage in a parent component
export function MyWidgetManager() {
  const [selectedTag, setSelectedTag] = useState<string>('')

  return (
    <WidgetTags 
      value={selectedTag} 
      onChange={(newValue) => setSelectedTag(newValue)} 
    />
  )
}

To add or remove widgets from the application, use the DeployedWidgetApi.

Adding a Widget

Use DeployedWidgetApi.addWidget to deploy a widget. You can specify the deployment mode (e.g., BACKGROUND, NORMAL, OVERLAP, or TRAY) and provide a packageJsonUrl if the widget is hosted remotely.

Removing a Widget

Use DeployedWidgetApi.removeDeployedWidgetByName to uninstall a widget by its name.

Other Actions

• Create Desktop Shortcut: Use DeployedWidgetApi.createDesktopShortcut(widgetName) to create a shortcut for a specific widget.
• Open DevTools: Use DeployedWidgetApi.openDevTools(widgetName) to open developer tools for a deployed widget (typically used in development modes).

// Adding a widget
await DeployedWidgetApi.addWidget({
  widgetName: 'my-widget-name',
  deployMode: DeployMode.BACKGROUND,
  packageJsonUrl: 'https://example.com/package.json',
});

// Removing a widget
await DeployedWidgetApi.removeDeployedWidgetByName('my-widget-name');

// Creating a desktop shortcut
await DeployedWidgetApi.createDesktopShortcut('my-widget-name');

// Opening DevTools
await DeployedWidgetApi.openDevTools('my-widget-name');