Apply Pro chart themes in docs

Author: iexitdev

apps/site/src/components/ThemeInit.astro

@@ -1,19 +1,12 @@
-<script is:inline>
+---
+import { chartThemeOptions } from "../previews/chartTheme";
+
+const chartThemeValues = chartThemeOptions.map((option) => option.value);
+const themeInitScript = `
   (() => {
     const storageKey = "starlight-theme";
     const chartThemeStorageKey = "chartkit-chart-theme";
-    const chartThemes = new Set([
-      "default",
-      "spectrum",
-      "aurora",
-      "verdant",
-      "cupertino",
-      "material",
-      "graphite",
-      "contrast",
-      "midnight",
-      "studio"
-    ]);
+    const chartThemes = new Set(${JSON.stringify(chartThemeValues)});
     const getStoredTheme = () => {
       try {
         const stored = localStorage.getItem(storageKey);
@@ -42,4 +35,7 @@
     document.documentElement.dataset.chartTheme = chartTheme;
     document.documentElement.style.colorScheme = theme;
   })();
-</script>
+`;
+---
+
+<script is:inline set:html={themeInitScript} />

apps/site/src/previews/chartTheme.ts

@@ -1,3 +1,8 @@
+import {
+  proCartesianChartPresetOptions,
+  type ProCartesianChartPresetName
+} from "@chart-kit/pro/themes";
+
 export type ChartThemePreset =
   | "default"
   | "spectrum"
@@ -8,7 +13,8 @@ export type ChartThemePreset =
   | "graphite"
   | "contrast"
   | "midnight"
-  | "studio";
+  | "studio"
+  | ProCartesianChartPresetName;
 
 export const chartThemeStorageKey = "chartkit-chart-theme";
 export const chartThemeChangeEvent = "chartkit:chart-theme-change";
@@ -26,7 +32,11 @@ export const chartThemeOptions: Array<{
   { label: "Graphite", value: "graphite" },
   { label: "Contrast", value: "contrast" },
   { label: "Midnight", value: "midnight" },
-  { label: "Studio", value: "studio" }
+  { label: "Studio", value: "studio" },
+  ...proCartesianChartPresetOptions.map((option) => ({
+    label: `${option.title} (Pro)`,
+    value: option.id
+  }))
 ];
 
 export const isChartThemePreset = (

apps/site/src/previews/reactNativeWebStub.tsx

@@ -1041,6 +1041,9 @@ export const Touchable = {
 };
 
 export const NativeModules = {};
+export const Share = {
+  share: () => Promise.resolve({ action: "sharedAction" })
+};
 export const UIManager = {};
 export const TurboModuleRegistry = {
   get: () => null,

apps/site/src/previews/showcaseTheme.ts

@@ -2,6 +2,7 @@ import {
   createChartPreset,
   type CartesianChartPresetRegistry
 } from "react-native-chart-kit/v2";
+import { proCartesianChartPresets } from "@chart-kit/pro/themes";
 
 export const showcaseCustomPresets: CartesianChartPresetRegistry = {
   studio: createChartPreset({
@@ -31,5 +32,6 @@ export const showcaseCustomPresets: CartesianChartPresetRegistry = {
         legendLabelSize: 12
       }
     }
-  })
+  }),
+  ...proCartesianChartPresets
 };