create-widget 24.1.1-beta.8 → 26.7.21

package/template/react/src/components/ui/slider.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package/template/react/src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/template/react/src/components/ui/tabs.tsx

@@ -0,0 +1,88 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/template/react/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/template/react/src/main.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { HashRouter } from 'react-router-dom'
+import App from './App'
+import '@widget-js/react/style.css'
+import '@/assets/main.css'
+
+const container = document.getElementById('root')
+
+if (!container) {
+  throw new Error('Root container #root was not found.')
+}
+
+createRoot(container).render(
+  <StrictMode>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </StrictMode>,
+)

package/template/react/src/pages/home-page.tsx

@@ -0,0 +1,66 @@
+import { Link } from 'react-router-dom'
+import { widgets } from '@/widgets/widget-router'
+
+export default function HomePage() {
+  return (
+    <main className="home-page">
+      <section className="hero-panel">
+        <p className="eyebrow">WidgetJS React Example</p>
+        <h1>Vue 示例已迁移为 React</h1>
+        <p className="hero-copy">
+          这个示例现在使用 Vite + React + TypeScript，并直接复用
+          <code>@widget-js/react</code>
+          提供的组件和 hooks。
+        </p>
+      </section>
+
+      <section className="widget-grid">
+        {widgets.map((widget) => {
+          const title = widget.title?.['zh-CN'] ?? widget.name
+          const widgetQuery = new URLSearchParams({
+            w_id: 'demo-clock',
+            w_name: widget.name,
+            w_title: title,
+            w_mode: '0',
+          })
+
+          const configPath = widget.configPagePath?.split('?')[0] ?? '/widget/config/clock'
+          const configQuery = new URLSearchParams(widget.configPagePath?.split('?')[1] ?? '')
+
+          configQuery.set('w_id', 'demo-clock')
+          configQuery.set('w_name', widget.name)
+          configQuery.set('w_title', title)
+          configQuery.set('w_mode', '0')
+
+          return (
+            <article key={widget.name} className="widget-card">
+              <div className="widget-card__body">
+                <p className="widget-card__tag">React Widget</p>
+                <h2>{title}</h2>
+                <p>{widget.description?.['zh-CN'] ?? '一个最小可运行的 React 挂件示例。'}</p>
+                <dl className="widget-meta">
+                  <div>
+                    <dt>Widget</dt>
+                    <dd>{widget.path}</dd>
+                  </div>
+                  <div>
+                    <dt>Config</dt>
+                    <dd>{configPath}</dd>
+                  </div>
+                </dl>
+              </div>
+              <div className="widget-card__actions">
+                <Link className="action-link action-link--primary" to={`${widget.path}?${widgetQuery.toString()}`}>
+                  打开组件
+                </Link>
+                <Link className="action-link" to={`${configPath}?${configQuery.toString()}`}>
+                  打开配置页
+                </Link>
+              </div>
+            </article>
+          )
+        })}
+      </section>
+    </main>
+  )
+}

package/template/react/src/widgets/clock/Clock.widget.ts

@@ -0,0 +1,21 @@
+import { Widget, WidgetKeyword } from '@widget-js/core'
+
+// TODO 修改组件信息，标题，描述，关键词
+const ClockWidget = new Widget({
+  name: 'cn.example.widget.clock',
+  title: { 'zh-CN': '时钟' },
+  description: { 'zh-CN': 'Hello world!' },
+  keywords: [WidgetKeyword.RECOMMEND],
+  lang: 'zh-CN',
+  width: 3,
+  height: 3,
+  minWidth: 2,
+  maxWidth: 6,
+  minHeight: 2,
+  maxHeight: 6,
+  previewImage: '/preview_clock.png',
+  path: '/widget/clock',
+  configPagePath: '/widget/config/clock?frame=true&transparent=false&width=700&height=800',
+})
+
+export default ClockWidget

package/template/react/src/widgets/clock/ClockConfigView.tsx

@@ -0,0 +1,112 @@
+import type { WidgetThemeOption } from '@widget-js/react'
+import { useWidget, useWidgetStorage, useWidgetTheme, WidgetThemeForm, Window } from '@widget-js/react'
+import { Button } from '@/components/ui/button'
+import {
+  Field,
+  FieldContent,
+  FieldGroup,
+  FieldLabel,
+} from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { Switch } from '@/components/ui/switch'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+
+const clockThemeOption: WidgetThemeOption = {
+  useGlobalTheme: true,
+  borderRadius: true,
+  backgroundColor: true,
+  backgroundBorderColor: true,
+  primaryColor: true,
+  color: true,
+} as const
+
+export default function ClockConfigView() {
+  const { save } = useWidget()
+  const { widgetTheme, setWidgetTheme } = useWidgetTheme()
+  const [title, setTitle] = useWidgetStorage('title', 'Clock')
+  const [use24Hour, setUse24Hour] = useWidgetStorage('use-24-hour', true)
+  const [showSeconds, setShowSeconds] = useWidgetStorage('show-seconds', true)
+
+  return (
+    <Window
+      title={title}
+      footer={(
+        <div className="flex flex-wrap justify-end gap-3">
+          <Button type="button" variant="outline" onClick={() => save()}>
+            应用
+          </Button>
+          <Button type="button" onClick={() => save({ closeWindow: true })}>
+            保存并关闭
+          </Button>
+        </div>
+      )}
+    >
+      <Tabs defaultValue="content" className="gap-4">
+        <TabsList className="w-full justify-start">
+          <TabsTrigger value="content">组件设置</TabsTrigger>
+          <TabsTrigger value="theme">主题设置</TabsTrigger>
+        </TabsList>
+
+        <TabsContent
+          value="content"
+          className="rounded-xl border bg-card p-6 shadow-sm"
+        >
+          <FieldGroup>
+            <Field orientation="horizontal">
+              <FieldContent>
+                <FieldLabel htmlFor="clock-title" className="shrink-0 whitespace-nowrap md:justify-start">
+                  标题
+                </FieldLabel>
+              </FieldContent>
+              <Input
+                className="w-32"
+                id="clock-title"
+                value={title}
+                placeholder="输入组件标题"
+                onChange={event => setTitle(event.target.value)}
+              />
+            </Field>
+
+            <Field orientation="horizontal">
+              <FieldContent>
+                <FieldLabel htmlFor="clock-24-hour" className="shrink-0 whitespace-nowrap md:justify-start">
+                  使用 24 小时制
+                </FieldLabel>
+              </FieldContent>
+              <Switch
+                id="clock-24-hour"
+                checked={use24Hour}
+                onCheckedChange={setUse24Hour}
+              />
+            </Field>
+
+            <Field orientation="horizontal">
+              <FieldContent>
+                <FieldLabel htmlFor="clock-show-seconds" className="shrink-0 whitespace-nowrap md:justify-start">
+                  显示秒钟
+                </FieldLabel>
+              </FieldContent>
+              <Switch
+                id="clock-show-seconds"
+                checked={showSeconds}
+                onCheckedChange={setShowSeconds}
+              />
+            </Field>
+          </FieldGroup>
+        </TabsContent>
+
+        <TabsContent
+          value="theme"
+          className="rounded-xl border bg-card p-6 shadow-sm"
+        >
+          <WidgetThemeForm
+            showSectionHeader={false}
+            themeOption={clockThemeOption}
+            value={widgetTheme}
+            onChange={setWidgetTheme}
+          />
+        </TabsContent>
+      </Tabs>
+    </Window>
+  )
+}

package/template/react/src/widgets/clock/ClockWidgetRoutes.ts

@@ -0,0 +1,25 @@
+import type { RouteObject } from 'react-router-dom'
+import { createElement } from 'react'
+import ClockWidget from './Clock.widget'
+import ClockConfigView from './ClockConfigView'
+import ClockWidgetView from './ClockWidgetView'
+
+const path = ClockWidget.path
+const name = ClockWidget.name
+
+const configPagePath = ClockWidget.configPagePath!.split('?')[0]!
+
+const ClockWidgetRoutes: RouteObject[] = [
+  {
+    path,
+    id: `${name}`,
+    element: createElement(ClockWidgetView),
+  },
+  {
+    path: configPagePath,
+    id: `${name}.config`,
+    element: createElement(ClockConfigView),
+  },
+]
+
+export default ClockWidgetRoutes

package/template/react/src/widgets/clock/ClockWidgetView.tsx

@@ -0,0 +1,104 @@
+import { useWidget, useWidgetStorage, WidgetWrapper } from '@widget-js/react'
+import { useEffect, useMemo, useState } from 'react'
+import styled from 'styled-components'
+
+const ClockSection = styled.section`
+  display: grid;
+  place-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  color: var(--widget-color);
+  text-align: center;
+  user-select: none;
+`
+
+const Eyebrow = styled.p`
+  margin: 0;
+  color: color-mix(in srgb, var(--widget-primary-color, #4ed6ff) 70%, white);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+`
+
+const Title = styled.h1`
+  margin: 0;
+  font-size: clamp(18px, 2vw, 26px);
+  font-weight: 700;
+`
+
+const TimeText = styled.div`
+  font-size: clamp(28px, 3.4vw, 46px);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.04em;
+`
+
+const DateText = styled.p`
+  margin: 0;
+  color: color-mix(in srgb, var(--widget-color, #fff) 72%, transparent);
+  font-size: 12px;
+`
+
+export default function ClockWidgetView() {
+  const { widgetParams, language } = useWidget()
+  const [title] = useWidgetStorage('title', 'Clock')
+  const [use24Hour] = useWidgetStorage('use-24-hour', true)
+  const [showSeconds] = useWidgetStorage('show-seconds', true)
+  const [now, setNow] = useState(() => new Date())
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setNow(new Date())
+    }, 1000)
+
+    return () => {
+      window.clearInterval(timer)
+    }
+  }, [])
+
+  useEffect(() => {
+    const previousHtmlBackground = document.documentElement.style.background
+    const previousBodyBackground = document.body.style.background
+
+    document.documentElement.style.background = 'transparent'
+    document.body.style.background = 'transparent'
+
+    return () => {
+      document.documentElement.style.background = previousHtmlBackground
+      document.body.style.background = previousBodyBackground
+    }
+  }, [])
+
+  const locale = widgetParams.lang ?? language ?? 'zh-CN'
+
+  const timeText = useMemo(() => {
+    return new Intl.DateTimeFormat(locale, {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: showSeconds ? '2-digit' : undefined,
+      hour12: !use24Hour,
+    }).format(now)
+  }, [locale, now, showSeconds, use24Hour])
+
+  const dateText = useMemo(() => {
+    return new Intl.DateTimeFormat(locale, {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+    }).format(now)
+  }, [locale, now])
+
+  return (
+    <WidgetWrapper>
+      <ClockSection>
+        <Eyebrow>{widgetParams.title ?? 'WidgetJS React'}</Eyebrow>
+        <Title>{title}</Title>
+        <TimeText>{timeText}</TimeText>
+        <DateText>{dateText}</DateText>
+      </ClockSection>
+    </WidgetWrapper>
+  )
+}

package/template/react/src/widgets/widget-router.ts

@@ -0,0 +1,11 @@
+import type { RouteObject } from 'react-router-dom'
+import ClockWidget from './clock/Clock.widget'
+import ClockWidgetRoutes from './clock/ClockWidgetRoutes'
+
+export const widgets = [
+  ClockWidget,
+]
+
+export const widgetRoutes: RouteObject[] = [
+  ...ClockWidgetRoutes,
+]

package/template/react/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["env.d.ts", "src"]
+}

package/template/react/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "files": []
+}

package/template/react/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "verbatimModuleSyntax": true,
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

package/template/react/vite.config.ts

@@ -0,0 +1,27 @@
+import { fileURLToPath, URL } from 'node:url'
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import widget from '@widget-js/vite-plugin-widget'
+import { defineConfig } from 'vite'
+
+export default defineConfig((config) => {
+  const offlineMode = config.mode === 'offline'
+  const base = offlineMode ? './' : '/clock'
+  return {
+    base,
+    plugins: [
+      tailwindcss(),
+      widget({
+        zipName: 'test-widget',
+        generateZip: offlineMode,
+      }),
+      react(),
+
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+      },
+    },
+  }
+})

package/template/{widget.package.ts → react/widget.package.ts}

@@ -8,12 +8,16 @@ export default new WidgetPackage({
   },
   entry: '/',
   hash: true,
+  remote: {
+    base: '/',
+    hostname: '修改成你的域名',
+    hash: true,
+  },
   homepage: '',
   name: 'cn.example.widget',
   title: {
     'zh-CN': '修改成你的组件标题',
   },
-  version: '1.0.0',
   devOptions: {
     folder: './src/widgets/',
   },

package/template/{.vscode → vue/.vscode}/extensions.json

@@ -1,3 +1,3 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}