Function App

App.tsx:309–750

()

);

export default function App() {
  const { width } = useWindowDimensions();
  const [isVisualMode, setIsVisualMode] = useState(getInitialVisualMode);
  const [visualStory, setVisualStory] =
    useState<ShowcaseStory>(getInitialStory);
  const [pageSelection, setPageSelection] = useState<PageSelection>(
    getInitialPageSelection,
  );
  const [themeMode, setThemeMode] =
    useState<ShowcaseThemeMode>(getInitialThemeMode);
  const [chartPreset, setChartPreset] =
    useState<ShowcasePresetId>(getInitialPreset);
  const [rendererMode, setRendererMode] = useState<PreviewRendererMode>(
    getInitialRendererMode,
  );
  const [isScrubbing, setIsScrubbing] = useState(false);
  const [touchTracingEnabled, setTouchTracingEnabled] = useState(false);
  const isDarkApp = themeMode === "dark";
  const isExportDemoPage = pageSelection.page.id === "export-workflows";
  const appTheme = useMemo(
    () =>
      resolveCartesianChartThemeConfig({
        mode: themeMode,
        preset: chartPreset,
        presets: showcaseCustomPresets,
      }),
    [chartPreset, themeMode],
  );

  const pageStoryGroups = useMemo(
    () =>
      getShowcasePageStoryGroups(pageSelection.page).map((group) => ({
        ...group,
        stories: group.storyIds
          .map((storyId) => stories.find((story) => story.id === storyId))
          .filter((story): story is ShowcaseStory => story !== undefined),
      })),
    [pageSelection.page],
  );
  const takeoverStories = useMemo(
    () =>
      pageStoryGroups
        .flatMap((group) => group.stories)
        .filter((story) => story.presentation === "takeover"),
    [pageStoryGroups],
  );
  const takeoverStory = useMemo(
    () =>
      takeoverStories.find((story) => story.id === visualStory.id) ??
      takeoverStories[0],
    [takeoverStories, visualStory.id],
  );

  const isWideLayout = width >= 860;
  const previewWidth = Math.max(
    280,
    Math.min(width - 40, isWideLayout ? 940 : 430),
  );