From 1d2d9eeba8ecd6424d52cae0157a4e640dec4a1b Mon Sep 17 00:00:00 2001 From: Jaganath M S Date: Mon, 25 May 2026 08:27:21 +0530 Subject: [PATCH] fix(playground): replace Vite template README with playground guide Swap the boilerplate Vite + TypeScript README for documentation specific to the calendar-simple playground. - Explain the file:.. dependency on the library's dist/ build - Document the build-library-first setup step (dist/ is git-ignored) - Add scripts table, source-file tour, and usage tips --- playground/README.md | 130 +++++++++++++++++++++++-------------------- 1 file changed, 69 insertions(+), 61 deletions(-) diff --git a/playground/README.md b/playground/README.md index 8c2d760..b2bb2f5 100644 --- a/playground/README.md +++ b/playground/README.md @@ -1,73 +1,81 @@ -# React + TypeScript + Vite +# Calendar Simple — Playground -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +A local Vite + React 19 dev harness for exercising the [`calendar-simple`](../) library +against the **real published build** (not the source). It renders a live `` +next to an interactive control panel that lets you toggle nearly every prop and swap +between curated event fixtures. -Currently, two official plugins are available: +Use it to reproduce bugs, eyeball layout/theming changes, and sanity-check the public +API the way a consumer would actually import it. -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## Relationship to the library -## React Compiler +The playground depends on the parent package via `"calendar-simple": "file:.."`, so it +imports from the library's **`dist/` output**, exactly like an external consumer: -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). - -## Expanding the ESLint configuration +```ts +import Calendar from "calendar-simple"; +import type { CalendarProps } from "calendar-simple"; +import "calendar-simple/dist/styles.css"; +``` -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: +Because of this, **you must build the library before running the playground.** `dist/` +is git-ignored and not committed. -```js -export default defineConfig([ - globalIgnores(["dist"]), - { - files: ["**/*.{ts,tsx}"], - extends: [ - // Other configs... +## Getting started - // Remove tseslint.configs.recommended and replace with this - tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, +From the repository root, build the library first: - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ["./tsconfig.node.json", "./tsconfig.app.json"], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]); +```bash +npm install +npm run build # produces dist/ that the playground imports ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: - -```js -// eslint.config.js -import reactX from "eslint-plugin-react-x"; -import reactDom from "eslint-plugin-react-dom"; - -export default defineConfig([ - globalIgnores(["dist"]), - { - files: ["**/*.{ts,tsx}"], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs["recommended-typescript"], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ["./tsconfig.node.json", "./tsconfig.app.json"], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]); +Then run the playground: + +```bash +cd playground +npm install +npm run dev # opens the app in your browser ``` + +> After changing library source, re-run `npm run build` in the root (or `npm run build -- --watch`) +> so the playground picks up your changes. + +## Scripts + +| Command | Description | +| ----------------- | ---------------------------------------------- | +| `npm run dev` | Start the Vite dev server (auto-opens) | +| `npm run build` | Type-check (`tsc -b`) and build the playground | +| `npm run preview` | Preview the production build | +| `npm run lint` | Run ESLint | + +## What's in here + +- **`src/App.tsx`** — Lays out the live `` and the control panel. Wires every + event callback (`onEventClick`, `onDateClick`, `onMoreClick`, `onNavigate`, + `onViewChange`, `onSlotClick`) to `console.log` so interactions are observable in the + browser console. +- **`src/ControlPanel.tsx`** — A collapsible, sectioned panel of controls that maps UI + state to `Partial`. Sections cover **View, Time Grid, Year Picker, + Interaction, Appearance, Class Names, Localization, Loading, Renderers, Performance, + Layout, and Debug.** Each section shows a badge counting modified props and has its own + reset; "Reset All" restores defaults. +- **`src/TestFixtures.ts`** — Curated `CalendarEvent[]` fixtures selectable from the + panel's **Events** dropdown: Edge Cases, Empty, Single Timed, Single All-Day, All-Day + Banner Stress, Month Overflow, Large Dataset (1k / 10k), DST Spring/Fall, Year/Month + Boundary, Unicode Titles, Custom Metadata, and HTML Injection. + +## Tips + +- The custom **Renderers** toggles (`renderEvent`, `renderHeader`, `renderHourCell`, + `renderDateCell`, `renderScheduleSeparator`) and **Loading** renderer swap in small demo + implementations so you can see custom-render hooks fire without writing code. +- The **Large Dataset** fixtures (1k / 10k events) are useful for spot-checking rendering + performance and the `enableEnrichedEvents` / `eventsAreSorted` / `sortedMonthView` + performance props. +- The **HTML Injection** and **Unicode Titles** fixtures are handy for verifying escaping + and i18n/RTL behavior alongside the **Localization** section. + +This is an internal dev tool — it is private (`"private": true`) and is not published.