[scheduler] Split scheduler overview (mui#22453)

Signed-off-by: José Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Co-authored-by: noraleonte <noraleonte00@gmail.com>
Co-authored-by: Rita <47579513+rita-codes@users.noreply.github.com>

Author: 3 people

docs/data/scheduler/overview/overview.md

@@ -15,6 +15,17 @@ githubLabel: 'scope: scheduler'
 
 {{"component": "@mui/internal-core-docs/ComponentLinkHeader", "design": false}}
 
-{{"component": "modules/components/overview/scheduler/mainDemo/MainDemo.tsx"}}
+## Event Calendar
+
+Start with the MIT-licensed Event Calendar for everyday scheduling, then unlock Premium features when your calendar workflows need recurrence or server-backed loading.
+
+{{"component": "modules/components/overview/scheduler/mainDemo/CalendarDemo.tsx"}}
+
+## Event Timeline [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
+
+Use the Premium Event Timeline to plan long-running work across teams, resources, and date ranges.
+
+{{"component": "modules/components/overview/scheduler/mainDemo/TimelineDemo.tsx"}}
+
 {{"component": "modules/components/overview/scheduler/SchedulerFeaturesHighlight.tsx"}}
 {{"component": "modules/components/overview/scheduler/SchedulerCommunityOrPremium.tsx"}}

docs/pages/x/react-scheduler/index.js

@@ -2,5 +2,5 @@ import { MarkdownDocs } from '@mui/internal-core-docs/MarkdownDocs';
 import * as pageProps from 'docs/data/scheduler/overview/overview.md?muiMarkdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} disableAd wideLayout />;
+  return <MarkdownDocs {...pageProps} disableAd wideLayout disableToc />;
 }

docs/src/modules/components/overview/scheduler/LicenseCard.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { grey, blue } from '@mui/material/colors';
+
+type Plan = 'community' | 'premium';
+
+type LicenseCardProps = {
+  plan: Plan;
+  title: string;
+  description: string;
+};
+
+const PLAN_CONFIG: Record<
+  Plan,
+  { iconSrc: string; packageName: string; palette: typeof grey | typeof blue }
+> = {
+  community: {
+    iconSrc: '/static/x/community.svg',
+    packageName: '@mui/x-scheduler',
+    palette: grey,
+  },
+  premium: {
+    iconSrc: '/static/x/premium.svg',
+    packageName: '@mui/x-scheduler-premium',
+    palette: blue,
+  },
+};
+
+export default function LicenseCard({ plan, title, description }: LicenseCardProps) {
+  const { iconSrc, packageName, palette } = PLAN_CONFIG[plan];
+
+  return (
+    <Paper
+      variant="outlined"
+      sx={(theme) => ({
+        p: 3,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        flexGrow: 1,
+        borderColor: alpha(palette[500], 0.2),
+        backgroundColor: alpha(palette[100], 0.2),
+        ...theme.applyDarkStyles({
+          borderColor: alpha(palette[700], 0.2),
+          backgroundColor: alpha(palette[900], 0.05),
+        }),
+      })}
+    >
+      <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
+        <Stack direction="row" sx={{ alignItems: 'center', gap: 1.5 }}>
+          <Box component="img" src={iconSrc} width={16} height={16} alt="" />
+          <Typography
+            component="h3"
+            variant="body1"
+            sx={(theme) => ({
+              fontWeight: 'semiBold',
+              color: palette[900],
+              ...theme.applyDarkStyles({ color: palette[300] }),
+            })}
+          >
+            {title}
+          </Typography>
+        </Stack>
+        <Box
+          sx={(theme) => ({
+            px: 1.25,
+            py: 0.25,
+            borderRadius: 999,
+            border: '1px solid',
+            borderColor: palette[200],
+            fontFamily: theme.typography.fontFamilyCode,
+            fontSize: theme.typography.pxToRem(12),
+            color: palette[800],
+            ...theme.applyDarkStyles({
+              borderColor: alpha(palette[800], 0.5),
+              color: palette[300],
+            }),
+          })}
+        >
+          {packageName}
+        </Box>
+      </Stack>
+      <Typography
+        variant="body2"
+        sx={(theme) => ({
+          color: palette[800],
+          ...theme.applyDarkStyles({ color: palette[200] }),
+        })}
+      >
+        {description}
+      </Typography>
+    </Paper>
+  );
+}

docs/src/modules/components/overview/scheduler/SchedulerCommunityOrPremium.tsx

@@ -1,26 +1,65 @@
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
+import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
-import CommunityOrPro from '../CommunityOrPro';
+import Typography from '@mui/material/Typography';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 
 export default function SchedulerCommunityOrPremium() {
   return (
     <React.Fragment>
       <Divider />
-      <Stack direction="column" spacing={{ xs: 1, md: 2 }} sx={{ py: 8, alignItems: 'center' }}>
-        <CommunityOrPro
-          caption={'Community and Premium'}
-          title={'Two packages for every need'}
-          description={
-            'Start with the free-forever Community version, then upgrade to Premium when you are ready for additional features and components.'
-          }
-          communityDescription={
-            'Free forever under MIT license. Includes core features such as resource management, multiple views, or drag and drop.'
-          }
-          premiumDescription={
-            'Requires a commercial license. Includes additional features such as recurring events, lazy loading, and virtualization, as well as premium components such as the Event Timeline.'
-          }
-        />
+      <Stack
+        direction={{ xs: 'column', md: 'row' }}
+        sx={{
+          alignItems: { md: 'flex-end', xs: 'space-between' },
+          justifyContent: { md: 'space-between', xs: 'flex-end' },
+          flexGrow: 1,
+          maxWidth: { xs: '500px', md: '100%' },
+          width: '100%',
+          mt: 6,
+          mb: 12,
+        }}
+      >
+        <Stack
+          spacing={1}
+          sx={{ flexBasis: { xs: '100%', md: '65%' }, marginBottom: { xs: '16px', md: 0 } }}
+        >
+          <Typography variant="body2" color="primary" sx={{ fontWeight: 'semiBold' }}>
+            Plans & licensing
+          </Typography>
+          <Typography
+            variant="h4"
+            component="h2"
+            sx={{ fontWeight: 'semiBold', color: 'text.primary', fontSize: '1.625rem' }}
+          >
+            Two packages for every need
+          </Typography>
+          <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+            Community is MIT-licensed and free forever. Premium is licensed per developer and adds
+            advanced calendar features plus the Event Timeline.{' '}
+          </Typography>
+        </Stack>
+        <Stack direction="row" spacing={2} sx={{ flexDirection: { xs: 'column', md: 'row' } }}>
+          <Button
+            size="small"
+            variant="contained"
+            href="/pricing"
+            endIcon={<ArrowForwardIcon />}
+            sx={{ width: 'fit-content' }}
+          >
+            Compare plans
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            href="/x/introduction/licensing/"
+            endIcon={<ArrowForwardIcon />}
+            sx={{ width: 'fit-content' }}
+          >
+            About licensing
+          </Button>
+        </Stack>
       </Stack>
     </React.Fragment>
   );

docs/src/modules/components/overview/scheduler/mainDemo/CalendarDemo.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import { EventCalendarPremium } from '@mui/x-scheduler-premium/event-calendar-premium';
+import { SchedulerEvent } from '@mui/x-scheduler/models';
+import { calendarEvents, calendarResources, calendarDefaultVisibleDate } from './data';
+import {
+  CustomThemeName,
+  DemoThemeSelector,
+  SchedulerDemoThemeProvider,
+} from './DemoThemeSelector';
+import LicenseCard from '../LicenseCard';
+
+export default function CalendarDemo() {
+  const [selectedTheme, setSelectedTheme] = React.useState<CustomThemeName>('default');
+  const [calendarEventsState, setCalendarEventsState] =
+    React.useState<SchedulerEvent[]>(calendarEvents);
+
+  return (
+    <Stack spacing={2.5} sx={{ width: '100%', mb: 6 }}>
+      <Stack direction="row" sx={{ justifyContent: 'flex-start' }}>
+        <DemoThemeSelector
+          ariaLabel="Calendar demo theme"
+          selectedTheme={selectedTheme}
+          onThemeChange={(event) => {
+            setSelectedTheme(event.target.value as CustomThemeName);
+          }}
+        />
+      </Stack>
+      <SchedulerDemoThemeProvider selectedTheme={selectedTheme}>
+        <Paper
+          elevation={0}
+          sx={{
+            height: 660,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+          }}
+        >
+          <Box sx={{ minHeight: 0, flexGrow: 1 }}>
+            <EventCalendarPremium
+              events={calendarEventsState}
+              onEventsChange={setCalendarEventsState}
+              resources={calendarResources}
+              defaultVisibleDate={calendarDefaultVisibleDate}
+              defaultView="month"
+              defaultPreferences={{ isSidePanelOpen: false }}
+              areEventsDraggable
+              areEventsResizable
+            />
+          </Box>
+        </Paper>
+      </SchedulerDemoThemeProvider>
+      <Stack direction="row" spacing={2} sx={{ flexDirection: { xs: 'column', md: 'row' } }}>
+        <LicenseCard
+          plan="community"
+          title="Community features"
+          description="Free forever under MIT. Everything you need for everyday calendar workflows: multiple views, resources, drag and drop, resizing, and full theming."
+        />
+        <LicenseCard
+          plan="premium"
+          title="Premium features"
+          description="Adds recurring events, exception dates, DST-aware recurrence, and lazy loading through data sources. Same API as Community, so upgrading is a one-line change."
+        />
+      </Stack>
+    </Stack>
+  );
+}

docs/src/modules/components/overview/scheduler/mainDemo/DemoThemeSelector.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { getSoftEdgesTheme } from '../theme/softEdgesTheme';
+import { getNeutralVibesTheme } from '../theme/neutralVibesTheme';
+
+export type CustomThemeName = 'default' | 'softEdges' | 'neutralVibes';
+
+// Use CSS variables to avoid first load light/dark blink.
+const darkThemeManagement = {
+  colorSchemes: { light: true, dark: true },
+  cssVariables: {
+    colorSchemeSelector: 'data-mui-color-scheme',
+  },
+};
+
+const themeOptions: { value: CustomThemeName; label: string }[] = [
+  { value: 'default', label: 'Default theme' },
+  { value: 'softEdges', label: 'Soft edges' },
+  { value: 'neutralVibes', label: 'Neutral vibes' },
+];
+
+export type DemoThemeSelectorProps = {
+  ariaLabel: string;
+  selectedTheme: CustomThemeName;
+  onThemeChange: (event: SelectChangeEvent) => void;
+};
+
+export function DemoThemeSelector({
+  ariaLabel,
+  selectedTheme,
+  onThemeChange,
+}: DemoThemeSelectorProps) {
+  return (
+    <Select
+      aria-label={ariaLabel}
+      value={selectedTheme}
+      onChange={onThemeChange}
+      size="small"
+      sx={{ minWidth: 160 }}
+    >
+      {themeOptions.map((option) => (
+        <MenuItem key={option.value} value={option.value}>
+          {option.label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+}
+
+type SchedulerDemoThemeProviderProps = {
+  children: React.ReactNode;
+  selectedTheme: CustomThemeName;
+};
+
+export function SchedulerDemoThemeProvider({
+  children,
+  selectedTheme,
+}: SchedulerDemoThemeProviderProps) {
+  const brandingTheme = useTheme();
+  const mode = brandingTheme.palette.mode;
+  const demoThemes = React.useMemo(
+    () => ({
+      default: createTheme(darkThemeManagement, { palette: { mode } }),
+      softEdges: getSoftEdgesTheme(mode),
+      neutralVibes: getNeutralVibesTheme(mode),
+    }),
+    [mode],
+  );
+
+  return <ThemeProvider theme={demoThemes[selectedTheme]}>{children}</ThemeProvider>;
+}