+
+
+
+ }
+ aria-label="Search"
+ />
+
-
-
+
+ 232 stays in Melbourne, Australia
+
);
}
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/Toggles.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/Toggles.tsx
deleted file mode 100644
index 3a5a079825260f..00000000000000
--- a/docs/data/joy/getting-started/templates/rental-dashboard/components/Toggles.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { Stack } from '@mui/joy';
-import ToggleGroup from './ToggleGroup';
-
-export default function Toggles() {
- return (
-
-
- , value: 'list' },
- { label: , value: 'map' },
- ]}
- />
-
- );
-}
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/useScript.ts b/docs/data/joy/getting-started/templates/rental-dashboard/useScript.ts
deleted file mode 100644
index 205f011215caa6..00000000000000
--- a/docs/data/joy/getting-started/templates/rental-dashboard/useScript.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as React from 'react';
-
-export type UseScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
-
-// Cached script statuses
-const cachedScriptStatuses: Record = {};
-
-/**
- * Simplified version of https://usehooks-ts.com/react-hook/use-script
- */
-function getScriptNode(src: string) {
- const node: HTMLScriptElement | null = document.querySelector(`script[src="${src}"]`);
- const status = node?.getAttribute('data-status') as UseScriptStatus | undefined;
-
- return {
- node,
- status,
- };
-}
-
-function useScript(src: string): UseScriptStatus {
- const [status, setStatus] = React.useState(() => {
- if (typeof window === 'undefined') {
- // SSR Handling - always return 'loading'
- return 'loading';
- }
-
- return cachedScriptStatuses[src] ?? 'loading';
- });
-
- React.useEffect(() => {
- const cachedScriptStatus = cachedScriptStatuses[src];
- if (cachedScriptStatus === 'ready' || cachedScriptStatus === 'error') {
- // If the script is already cached, set its status immediately
- setStatus(cachedScriptStatus);
- return;
- }
-
- // Fetch existing script element by src
- // It may have been added by another instance of this hook
- const script = getScriptNode(src);
- let scriptNode = script.node;
-
- if (!scriptNode) {
- // Create script element and add it to document body
- scriptNode = document.createElement('script');
- scriptNode.src = src;
- scriptNode.async = true;
- scriptNode.setAttribute('data-status', 'loading');
- document.body.appendChild(scriptNode);
-
- // Store status in attribute on script
- // This can be read by other instances of this hook
- const setAttributeFromEvent = (event: Event) => {
- const scriptStatus: UseScriptStatus = event.type === 'load' ? 'ready' : 'error';
-
- scriptNode?.setAttribute('data-status', scriptStatus);
- };
-
- scriptNode.addEventListener('load', setAttributeFromEvent);
- scriptNode.addEventListener('error', setAttributeFromEvent);
- } else {
- // Grab existing script status from attribute and set to state.
- setStatus(script.status ?? cachedScriptStatus ?? 'loading');
- }
-
- // Script event handler to update status in state
- // Note: Even if the script already exists we still need to add
- // event handlers to update the state for *this* hook instance.
- const setStateFromEvent = (event: Event) => {
- const newStatus = event.type === 'load' ? 'ready' : 'error';
- setStatus(newStatus);
- cachedScriptStatuses[src] = newStatus;
- };
-
- // Add event listeners
- scriptNode.addEventListener('load', setStateFromEvent);
- scriptNode.addEventListener('error', setStateFromEvent);
-
- // Remove event listeners on cleanup
- // eslint-disable-next-line consistent-return
- return () => {
- if (scriptNode) {
- scriptNode.removeEventListener('load', setStateFromEvent);
- scriptNode.removeEventListener('error', setStateFromEvent);
- }
-
- if (scriptNode) {
- try {
- scriptNode.remove();
- } catch (error) {
- // ignore error
- }
- }
- };
- }, [src]);
-
- return status;
-}
-
-export default useScript;
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/utils.ts b/docs/data/joy/getting-started/templates/rental-dashboard/utils.ts
deleted file mode 100644
index 83220658582ce6..00000000000000
--- a/docs/data/joy/getting-started/templates/rental-dashboard/utils.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export const openSidebar = () => {
- if (typeof document !== 'undefined') {
- document.body.style.overflow = 'hidden';
- document.documentElement.style.setProperty('--SideNavigation-slideIn', '1');
- }
-};
-
-export const closeSidebar = () => {
- if (typeof document !== 'undefined') {
- document.documentElement.style.removeProperty('--SideNavigation-slideIn');
- document.body.style.removeProperty('overflow');
- }
-};
-
-export const toggleSidebar = () => {
- if (typeof window !== 'undefined' && typeof document !== 'undefined') {
- const slideIn = window
- .getComputedStyle(document.documentElement)
- .getPropertyValue('--SideNavigation-slideIn');
- if (slideIn) {
- closeSidebar();
- } else {
- openSidebar();
- }
- }
-};
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard-dark.jpg
index 90ea71583bc2ac..c22fa87a2ab0c5 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard-dark.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard.jpg
index d464c6e26cedbe..c68699ad64aba8 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard.jpg differ
diff --git a/docs/scripts/generateTemplateScreenshots.ts b/docs/scripts/generateTemplateScreenshots.ts
index 8279cda61c6ab5..e8c0b5dacade8f 100644
--- a/docs/scripts/generateTemplateScreenshots.ts
+++ b/docs/scripts/generateTemplateScreenshots.ts
@@ -2,9 +2,18 @@ import fs from 'fs/promises';
import path from 'path';
import { chromium } from 'playwright';
+/**
+ * Usage:
+ * - `yarn screenshot` to generate all screenshots
+ * - `yarn screenshot order-dashboard` to generate screenshots for `docs/pages/joy-ui/getting-started/templates/order-dashboard.tsx`
+ * - `yarn screenshot [...templates]` to generate screenshots for the templates in `docs/pages/joy-ui/getting-started/templates/*`
+ */
+
const host = process.env.DEPLOY_PREVIEW || 'http://localhost:3000';
const directory = 'docs/public/static/screenshots';
+const names = new Set(process.argv.slice(2));
+
(async () => {
// eslint-disable-next-line no-console
console.info('Host:', host);
@@ -15,7 +24,11 @@ const directory = 'docs/public/static/screenshots';
path.join(process.cwd(), 'docs/pages/joy-ui/getting-started/templates'),
);
const urls = files
- .filter((file) => !file.startsWith('index'))
+ .filter(
+ (file) =>
+ !file.startsWith('index') &&
+ (names.size === 0 || names.has(file.replace(/\.(js|tsx)$/, ''))),
+ )
.map((file) => `/joy-ui/getting-started/templates/${file.replace(/\.(js|tsx)$/, '/')}`);
try {