Add a new UI Playground to display all components in a single page

airflow-core/src/airflow/ui/src/components/ui/index.ts

@@ -36,3 +36,7 @@ export * from "./Popover";
 export * from "./Checkbox";
 export * from "./ResetButton";
 export * from "./InputWithAddon";
+export * from "./NumberInput";
+export * from "./RadioCard";
+export * from "./Tag";
+export { default as SegmentedControl } from "./SegmentedControl";

airflow-core/src/airflow/ui/src/pages/Playground/Playground.tsx

@@ -0,0 +1,174 @@
+/* eslint-disable i18next/no-literal-string */
+
+/* eslint-disable unicorn/consistent-function-scoping */
+
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Container, Heading, HStack, VStack } from "@chakra-ui/react";
+import { useState } from "react";
+
+import {
+  AirflowComponents,
+  Buttons,
+  Charts,
+  Collections,
+  Colors,
+  Forms,
+  Graph,
+  Layout,
+  ModalDialog,
+  Overlays,
+  Feedback,
+  TableOfContents,
+  Typography,
+} from "./index";
+
+/**
+ * AccessibilityHelper page - A comprehensive component showcase inspired by Chakra UI Playground
+ * for testing accessibility, contrast ratios, and Lighthouse metrics.
+ *
+ * Based on: https://www.chakra-ui.com/playground
+ * This page includes examples of all major UI components used in the Airflow UI
+ * to ensure they meet accessibility standards and provide good contrast ratios.
+ */
+export const Playground = () => {
+  // Modal state
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  // Form state
+  const [formState, setFormState] = useState({
+    currentPage: 1,
+    multipleSegmented: ["option1", "option2"],
+    progress: 75,
+    radio: "option1",
+    radioCard: "option1",
+    segmented: ["option1"],
+    slider: [50],
+    switch: false,
+  });
+
+  // Section visibility state - all open by default for better UX
+  const [openSections, setOpenSections] = useState<Record<string, boolean>>({
+    airflow: true,
+    buttons: true,
+    charts: true,
+    collections: true,
+    colors: true,
+    forms: true,
+    graphs: true,
+    layout: true,
+    overlays: true,
+    progress: true,
+    typography: true,
+  });
+
+  const toggleSection = (section: keyof typeof openSections) => {
+    setOpenSections((prev) => ({ ...prev, [section]: !prev[section] }));
+  };
+
+  const scrollToSection = (sectionId: string) => {
+    document.querySelector(`#${sectionId}`)?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  const updateFormState = (updates: Partial<typeof formState>) => {
+    setFormState((prev) => ({ ...prev, ...updates }));
+  };
+
+  return (
+    <Container>
+      <VStack align="stretch" gap={10}>
+        {/* Page Header */}
+        <Box as="header" mt={6} textAlign="center">
+          <Heading as="h1" id="main-heading" size="2xl">
+            Airflow UI Component Playground
+          </Heading>
+        </Box>
+
+        {/* Two Column Layout: Content + Table of Contents */}
+        <HStack align="flex-start" gap={8}>
+          {/* Main Content */}
+          <Box flex="1">
+            <VStack align="stretch" gap={8}>
+              {/* Colors Section */}
+              <Colors isOpen={openSections.colors ?? true} onToggle={() => toggleSection("colors")} />
+
+              {/* Airflow Components Section */}
+              <AirflowComponents isOpen={openSections.airflow ?? true} onToggle={() => toggleSection("airflow")} />
+
+              {/* Layout Section */}
+              <Layout isOpen={openSections.layout ?? true} onToggle={() => toggleSection("layout")} />
+
+              {/* Typography Section */}
+              <Typography
+                isOpen={openSections.typography ?? true}
+                onToggle={() => toggleSection("typography")}
+              />
+
+              {/* Buttons Section */}
+              <Buttons isOpen={openSections.buttons ?? true} onToggle={() => toggleSection("buttons")} />
+
+              {/* Forms Section */}
+              <Forms
+                formState={formState}
+                isOpen={openSections.forms ?? true}
+                onToggle={() => toggleSection("forms")}
+                updateFormState={updateFormState}
+              />
+
+              {/* Collections Section */}
+              <Collections
+                isOpen={openSections.collections ?? true}
+                onToggle={() => toggleSection("collections")}
+              />
+
+              {/* Progress & Alerts Section */}
+              <Feedback
+                isProgressOpen={openSections.progress ?? true}
+                isStatesOpen={false}
+                onProgressToggle={() => toggleSection("progress")}
+                onStatesToggle={() => {}}
+                progressValue={formState.progress}
+                setProgressValue={(value: number) => updateFormState({ progress: value })}
+              />
+
+              {/* Graph Components Section */}
+              <Graph isOpen={openSections.graphs ?? true} onToggle={() => toggleSection("graphs")} />
+
+              {/* Charts & Gantt Section */}
+              <Charts isOpen={openSections.charts ?? true} onToggle={() => toggleSection("charts")} />
+
+              {/* Overlays Section */}
+              <Overlays isOpen={openSections.overlays ?? true} onToggle={() => toggleSection("overlays")} />
+            </VStack>
+          </Box>
+
+          {/* Table of Contents Sidebar */}
+          <TableOfContents
+            openSections={openSections}
+            scrollToSection={scrollToSection}
+            setOpenSections={setOpenSections}
+          />
+        </HStack>
+
+        {/* Modal Dialog */}
+        <ModalDialog isOpen={isDialogOpen} onClose={() => setIsDialogOpen(false)} />
+      </VStack>
+    </Container>
+  );
+};

airflow-core/src/airflow/ui/src/pages/Playground/TableOfContents.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable i18next/no-literal-string */
+
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, ButtonGroup, Heading, HStack, IconButton, Link, List, Text, VStack } from "@chakra-ui/react";
+import React from "react";
+import { MdExpand, MdCompress } from "react-icons/md";
+
+type TableOfContentsProps = {
+  readonly openSections: Record<string, boolean>;
+  readonly scrollToSection: (sectionId: string) => void;
+  readonly setOpenSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+};
+
+const sections = [
+  { id: "colors", title: "Colors" },
+  { id: "airflow", title: "Airflow Components" },
+  { id: "layout", title: "Layout" },
+  { id: "typography", title: "Typography" },
+  { id: "buttons", title: "Buttons" },
+  { id: "forms", title: "Forms" },
+  { id: "collections", title: "Collections" },
+  { id: "progress", title: "Progress & Alerts" },
+  { id: "graphs", title: "Graph" },
+  { id: "charts", title: "Charts" },
+  { id: "overlays", title: "Overlays" },
+];
+
+export const TableOfContents = ({ openSections, scrollToSection, setOpenSections }: TableOfContentsProps) => (
+  <Box height="fit-content" position="sticky" top="4">
+    <Box bg="bg.panel" borderColor="border.muted" borderWidth="1px" padding="4">
+      <VStack align="stretch" gap="4">
+        <Heading size="lg">Table of Contents</Heading>
+        {/* Quick Actions */}
+        <VStack align="stretch" gap="2">
+          <Text color="fg.muted" fontSize="xs" fontWeight="semibold">
+            Quick Actions
+          </Text>
+          <ButtonGroup attached size="sm" variant="outline" width="full">
+            <IconButton
+              aria-label="Expand All"
+              onClick={() => {
+                Object.keys(openSections).forEach((section) => {
+                  setOpenSections((prev) => ({ ...prev, [section]: true }));
+                });
+              }}
+              size="sm"
+              title="Expand All"
+            >
+              <MdExpand />
+            </IconButton>
+            <IconButton
+              aria-label="Collapse All"
+              onClick={() => {
+                Object.keys(openSections).forEach((section) => {
+                  setOpenSections((prev) => ({ ...prev, [section]: false }));
+                });
+              }}
+              size="sm"
+              title="Collapse All"
+            >
+              <MdCompress />
+            </IconButton>
+          </ButtonGroup>
+        </VStack>
+
+        {/* Navigation Links */}
+        <VStack align="stretch" gap="3">
+          <Text color="fg.muted" fontSize="xs" fontWeight="semibold">
+            Sections
+          </Text>
+          <Box aria-label="Page sections navigation" as="nav">
+            <List.Root variant="plain">
+              {sections.map(({ id, title }) => (
+                <List.Item key={id}>
+                  <Link
+                    _hover={{ bg: "bg.muted", textDecoration: "none" }}
+                    color="fg.default"
+                    display="block"
+                    fontSize="sm"
+                    onClick={() => {
+                      // Toggle the section state (open/close)
+                      setOpenSections((prev) => ({ ...prev, [id]: !openSections[id] }));
+                      scrollToSection(id);
+                    }}
+                    padding="2"
+                    transition="background 0.2s"
+                    width="full"
+                  >
+                    <HStack gap="2" justify="space-between">
+                      <Text>{title}</Text>
+                      <Text color="brand.solid" fontSize="lg">
+                        {(openSections[id] ?? true) ? "−" : "+"}
+                      </Text>
+                    </HStack>
+                  </Link>
+                </List.Item>
+              ))}
+            </List.Root>
+          </Box>
+        </VStack>
+      </VStack>
+    </Box>
+  </Box>
+);