@iyotsuba/schedule-react 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 yotsuba-kit contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,119 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  YsSchedule: () => YsSchedule,
+  YsToday: () => YsToday
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/YsSchedule.tsx
+var import_schedule_elements = require("@iyotsuba/schedule-elements");
+var import_react2 = require("react");
+
+// src/useElement.ts
+var import_react = require("react");
+function useElementBridge(properties, events) {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useLayoutEffect)(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    for (const [key, value] of Object.entries(properties)) {
+      if (value !== void 0) {
+        el[key] = value;
+      }
+    }
+  });
+  (0, import_react.useLayoutEffect)(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const disposers = [];
+    for (const [name, handler] of Object.entries(events)) {
+      if (!handler) {
+        continue;
+      }
+      const listener = (event) => {
+        const detail = event.detail;
+        handler(...Array.isArray(detail) ? detail : [detail]);
+      };
+      const hyphenated = name.replace(/([A-Z])/g, "-$1").toLowerCase();
+      el.addEventListener(name, listener);
+      disposers.push(() => el.removeEventListener(name, listener));
+      if (hyphenated !== name) {
+        el.addEventListener(hyphenated, listener);
+        disposers.push(() => el.removeEventListener(hyphenated, listener));
+      }
+    }
+    return () => disposers.forEach((dispose) => dispose());
+  });
+  return ref;
+}
+
+// src/YsSchedule.tsx
+(0, import_schedule_elements.register)();
+function YsSchedule(props) {
+  const {
+    className,
+    style,
+    onWeekChange,
+    onUpdateWeek,
+    onCourseTap,
+    onDayTap,
+    onSwipe,
+    onWeekPickerOpen,
+    onGuideStep,
+    onGuideFinish,
+    ...properties
+  } = props;
+  const ref = useElementBridge(properties, {
+    "weekChange": onWeekChange,
+    "update:week": onUpdateWeek,
+    "courseTap": onCourseTap,
+    "dayTap": onDayTap,
+    "swipe": onSwipe,
+    "weekPickerOpen": onWeekPickerOpen,
+    "guideStep": onGuideStep,
+    "guideFinish": onGuideFinish
+  });
+  return (0, import_react2.createElement)("ys-schedule", { "ref": ref, "class": className, style });
+}
+
+// src/YsToday.tsx
+var import_schedule_elements2 = require("@iyotsuba/schedule-elements");
+var import_react3 = require("react");
+(0, import_schedule_elements2.register)();
+function YsToday(props) {
+  const { className, style, onCourseTap, onWidgetTap, ...properties } = props;
+  const ref = useElementBridge(properties, {
+    courseTap: onCourseTap,
+    widgetTap: onWidgetTap
+  });
+  return (0, import_react3.createElement)("ys-today", { "ref": ref, "class": className, style });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  YsSchedule,
+  YsToday
+});

package/dist/index.d.cts

@@ -0,0 +1,71 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { Course, DayOverride, CourseTime, BuiltinTransitionName, TransitionSpec, ThemeTokens, WeatherSnapshot, GuideConfig, DisplayCourse, GuideStep } from '@iyotsuba/schedule-core';
+export { BuiltinTransitionName, Course, CourseTime, DayOverride, DisplayCourse, GuideConfig, GuideStep, ThemeTokens, TransitionSpec, WeatherProvider, WeatherSnapshot } from '@iyotsuba/schedule-core';
+
+interface YsScheduleProps {
+    courses: Course[];
+    week?: number;
+    totalWeeks?: number;
+    termStart?: Date;
+    overrides?: DayOverride[];
+    courseTimes?: CourseTime[] | 'standard';
+    visibleDays?: 5 | 6 | 7;
+    rowHeight?: number;
+    breakAfterSection?: number;
+    topBar?: 'compact' | 'standard' | 'expanded' | 'none';
+    topBarTitle?: string;
+    weekdayBar?: boolean;
+    transition?: BuiltinTransitionName | TransitionSpec;
+    theme?: 'light' | 'dark' | Partial<ThemeTokens>;
+    weather?: WeatherSnapshot | null;
+    reduceMotion?: boolean | 'auto';
+    swipeable?: boolean;
+    weekPicker?: 'builtin' | 'none';
+    courseDetail?: 'builtin' | 'none';
+    guide?: GuideConfig | false;
+    locale?: Record<string, unknown>;
+    onWeekChange?: (week: number, previous: number) => void;
+    /** 受控用法：配合 week 使用 */
+    onUpdateWeek?: (week: number) => void;
+    onCourseTap?: (course: DisplayCourse, stack: DisplayCourse[]) => void;
+    onDayTap?: (weekday: number, date: Date | null) => void;
+    onSwipe?: (direction: 1 | -1) => void;
+    onWeekPickerOpen?: () => void;
+    onGuideStep?: (step: GuideStep, index: number) => void;
+    onGuideFinish?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function YsSchedule(props: YsScheduleProps): react.ReactElement<{
+    ref: react.RefObject<HTMLElement | null>;
+    class: string | undefined;
+    style: CSSProperties | undefined;
+}, string | react.JSXElementConstructor<any>>;
+
+interface YsTodayProps {
+    courses: Course[];
+    termStart: Date;
+    totalWeeks?: number;
+    overrides?: DayOverride[];
+    courseTimes?: CourseTime[] | 'standard';
+    widgets?: Array<{
+        id: string;
+        enabled?: boolean;
+    }>;
+    theme?: 'light' | 'dark' | Partial<ThemeTokens>;
+    weather?: WeatherSnapshot | null;
+    now?: Date;
+    title?: string;
+    onCourseTap?: (course: DisplayCourse) => void;
+    onWidgetTap?: (id: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function YsToday(props: YsTodayProps): react.ReactElement<{
+    ref: react.RefObject<HTMLElement | null>;
+    class: string | undefined;
+    style: CSSProperties | undefined;
+}, string | react.JSXElementConstructor<any>>;
+
+export { YsSchedule, type YsScheduleProps, YsToday, type YsTodayProps };

package/dist/index.d.ts

@@ -0,0 +1,71 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { Course, DayOverride, CourseTime, BuiltinTransitionName, TransitionSpec, ThemeTokens, WeatherSnapshot, GuideConfig, DisplayCourse, GuideStep } from '@iyotsuba/schedule-core';
+export { BuiltinTransitionName, Course, CourseTime, DayOverride, DisplayCourse, GuideConfig, GuideStep, ThemeTokens, TransitionSpec, WeatherProvider, WeatherSnapshot } from '@iyotsuba/schedule-core';
+
+interface YsScheduleProps {
+    courses: Course[];
+    week?: number;
+    totalWeeks?: number;
+    termStart?: Date;
+    overrides?: DayOverride[];
+    courseTimes?: CourseTime[] | 'standard';
+    visibleDays?: 5 | 6 | 7;
+    rowHeight?: number;
+    breakAfterSection?: number;
+    topBar?: 'compact' | 'standard' | 'expanded' | 'none';
+    topBarTitle?: string;
+    weekdayBar?: boolean;
+    transition?: BuiltinTransitionName | TransitionSpec;
+    theme?: 'light' | 'dark' | Partial<ThemeTokens>;
+    weather?: WeatherSnapshot | null;
+    reduceMotion?: boolean | 'auto';
+    swipeable?: boolean;
+    weekPicker?: 'builtin' | 'none';
+    courseDetail?: 'builtin' | 'none';
+    guide?: GuideConfig | false;
+    locale?: Record<string, unknown>;
+    onWeekChange?: (week: number, previous: number) => void;
+    /** 受控用法：配合 week 使用 */
+    onUpdateWeek?: (week: number) => void;
+    onCourseTap?: (course: DisplayCourse, stack: DisplayCourse[]) => void;
+    onDayTap?: (weekday: number, date: Date | null) => void;
+    onSwipe?: (direction: 1 | -1) => void;
+    onWeekPickerOpen?: () => void;
+    onGuideStep?: (step: GuideStep, index: number) => void;
+    onGuideFinish?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function YsSchedule(props: YsScheduleProps): react.ReactElement<{
+    ref: react.RefObject<HTMLElement | null>;
+    class: string | undefined;
+    style: CSSProperties | undefined;
+}, string | react.JSXElementConstructor<any>>;
+
+interface YsTodayProps {
+    courses: Course[];
+    termStart: Date;
+    totalWeeks?: number;
+    overrides?: DayOverride[];
+    courseTimes?: CourseTime[] | 'standard';
+    widgets?: Array<{
+        id: string;
+        enabled?: boolean;
+    }>;
+    theme?: 'light' | 'dark' | Partial<ThemeTokens>;
+    weather?: WeatherSnapshot | null;
+    now?: Date;
+    title?: string;
+    onCourseTap?: (course: DisplayCourse) => void;
+    onWidgetTap?: (id: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function YsToday(props: YsTodayProps): react.ReactElement<{
+    ref: react.RefObject<HTMLElement | null>;
+    class: string | undefined;
+    style: CSSProperties | undefined;
+}, string | react.JSXElementConstructor<any>>;
+
+export { YsSchedule, type YsScheduleProps, YsToday, type YsTodayProps };

package/dist/index.js

@@ -0,0 +1,91 @@
+// src/YsSchedule.tsx
+import { register } from "@iyotsuba/schedule-elements";
+import { createElement } from "react";
+
+// src/useElement.ts
+import { useLayoutEffect, useRef } from "react";
+function useElementBridge(properties, events) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    for (const [key, value] of Object.entries(properties)) {
+      if (value !== void 0) {
+        el[key] = value;
+      }
+    }
+  });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const disposers = [];
+    for (const [name, handler] of Object.entries(events)) {
+      if (!handler) {
+        continue;
+      }
+      const listener = (event) => {
+        const detail = event.detail;
+        handler(...Array.isArray(detail) ? detail : [detail]);
+      };
+      const hyphenated = name.replace(/([A-Z])/g, "-$1").toLowerCase();
+      el.addEventListener(name, listener);
+      disposers.push(() => el.removeEventListener(name, listener));
+      if (hyphenated !== name) {
+        el.addEventListener(hyphenated, listener);
+        disposers.push(() => el.removeEventListener(hyphenated, listener));
+      }
+    }
+    return () => disposers.forEach((dispose) => dispose());
+  });
+  return ref;
+}
+
+// src/YsSchedule.tsx
+register();
+function YsSchedule(props) {
+  const {
+    className,
+    style,
+    onWeekChange,
+    onUpdateWeek,
+    onCourseTap,
+    onDayTap,
+    onSwipe,
+    onWeekPickerOpen,
+    onGuideStep,
+    onGuideFinish,
+    ...properties
+  } = props;
+  const ref = useElementBridge(properties, {
+    "weekChange": onWeekChange,
+    "update:week": onUpdateWeek,
+    "courseTap": onCourseTap,
+    "dayTap": onDayTap,
+    "swipe": onSwipe,
+    "weekPickerOpen": onWeekPickerOpen,
+    "guideStep": onGuideStep,
+    "guideFinish": onGuideFinish
+  });
+  return createElement("ys-schedule", { "ref": ref, "class": className, style });
+}
+
+// src/YsToday.tsx
+import { register as register2 } from "@iyotsuba/schedule-elements";
+import { createElement as createElement2 } from "react";
+register2();
+function YsToday(props) {
+  const { className, style, onCourseTap, onWidgetTap, ...properties } = props;
+  const ref = useElementBridge(properties, {
+    courseTap: onCourseTap,
+    widgetTap: onWidgetTap
+  });
+  return createElement2("ys-today", { "ref": ref, "class": className, style });
+}
+export {
+  YsSchedule,
+  YsToday
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@iyotsuba/schedule-react",
+  "version": "0.3.0",
+  "description": "Typed React bindings for the yotsuba schedule kit (<YsSchedule> / <YsToday> over custom elements).",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@iyotsuba/schedule-core": "0.3.0",
+    "@iyotsuba/schedule-elements": "0.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.0",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.8"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/isla4ever/yotsuba-kit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}