feat(theme-builder): chart preview options (#3042)

website/src/pages/themes/_components/chart-panel.tsx

@@ -12,20 +12,20 @@ type ChartPanelProps = {
 const ChartPanel = ({
   config: { title, description, selectLabel, types },
 }: ChartPanelProps) => {
-  const [chartType, setChartType] = React.useState(Object.keys(types)[0]);
-  const { setExampleContent } = usePreviewOptions();
+  const { activeChartType, setActiveChartType, setExampleContent } =
+    usePreviewOptions();
 
   useEffect(() => {
     const newChartType = Object.keys(types)[0];
-    setChartType((prevChartType) =>
-      prevChartType !== newChartType ? newChartType : prevChartType,
+    setActiveChartType((prevChartType) =>
+      prevChartType === null ? newChartType : prevChartType,
     );
-  }, [types]);
+  }, [types, setActiveChartType]);
 
   useEffect(() => {
-    const examples = types[chartType]?.content ?? [];
+    const examples = types[activeChartType]?.content ?? [];
     setExampleContent(examples);
-  }, [types, chartType, setExampleContent]);
+  }, [types, activeChartType, setExampleContent]);
 
   const options = useMemo(
     () =>
@@ -36,20 +36,20 @@ const ChartPanel = ({
     [types],
   );
   const controls = useMemo(
-    () => types[chartType]?.controls || [],
-    [types, chartType],
+    () => types[activeChartType]?.controls || [],
+    [types, activeChartType],
   );
 
   const onChartTypeChange = (newValue: string) => {
-    setChartType(newValue);
+    setActiveChartType(newValue);
   };
 
   return (
     <>
       <PanelHeader title={title} description={description} />
       <Select
         id="chart-type-select"
-        value={chartType}
+        value={activeChartType}
         onChange={onChartTypeChange}
         options={options}
         label={selectLabel}

website/src/pages/themes/_components/examples/area.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryArea, VictoryAxis, VictoryChart } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const AreaExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.AREA,
     title: "VictoryArea",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>

website/src/pages/themes/_components/examples/axis.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryAxis, VictoryChart } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const AxisExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.AXIS,
     title: "VictoryAxis",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>

website/src/pages/themes/_components/examples/bar.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryBar, VictoryAxis, VictoryChart } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const BarExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.BAR,
     title: "VictoryBar",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>

website/src/pages/themes/_components/examples/box-plot.tsx

@@ -4,9 +4,11 @@ import React from "react";
 import { VictoryBoxPlot } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const BoxPlotExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.BOX_PLOT,
     title: "VictoryBoxPlot",
     content: (props) => (
       <VictoryBoxPlot

website/src/pages/themes/_components/examples/candlestick.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryCandlestick } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const CandlestickExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.CANDLESTICK,
     title: "VictoryCandlestick",
     content: (props) => (
       <VictoryCandlestick

website/src/pages/themes/_components/examples/errorbar.tsx

@@ -3,9 +3,11 @@ import React from "react";
 import { VictoryErrorBar } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const ErrorBarExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.ERROR_BAR,
     title: "VictoryErrorBar",
     content: (props) => (
       <VictoryErrorBar

website/src/pages/themes/_components/examples/example.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import { ColorScalePropType, VictoryThemeDefinition } from "victory";
+import { VictoryComponentType } from "../../_const";
 
 type ExampleRenderProps = {
   colorScale: ColorScalePropType;
@@ -9,6 +10,7 @@ type ExampleRenderProps = {
 };
 
 export type ExampleConfig = {
+  key: VictoryComponentType;
   title: string;
   content: (props: ExampleRenderProps) => ReactElement;
   hasVictoryChart?: boolean;

website/src/pages/themes/_components/examples/group.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const GroupExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.GROUP,
     title: "VictoryGroup",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>

website/src/pages/themes/_components/examples/histogram.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryHistogram } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const HistogramExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.HISTOGRAM,
     title: "VictoryHistogram",
     content: (props) => (
       <VictoryHistogram

website/src/pages/themes/_components/examples/legend.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryBar, VictoryChart, VictoryLegend } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const LegendExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.LEGEND,
     title: "VictoryLegend",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>

website/src/pages/themes/_components/examples/line.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryAxis, VictoryChart, VictoryLine } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const LineExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.LINE,
     title: "VictoryLine",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>

website/src/pages/themes/_components/examples/pie.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryPie } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const PieExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.PIE,
     title: "VictoryPie",
     content: (props) => (
       <VictoryPie

website/src/pages/themes/_components/examples/polar-axis-dependent.tsx

@@ -3,9 +3,11 @@ import React from "react";
 import { VictoryChart, VictoryPolarAxis } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const PolarAxisDependentExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.POLAR_DEPENDENT_AXIS,
     title: "VictoryPolarAxis - Dependent",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>

website/src/pages/themes/_components/examples/polar-axis.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryChart, VictoryPolarAxis } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const PolarAxisExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.POLAR_AXIS,
     title: "VictoryPolarAxis",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>

website/src/pages/themes/_components/examples/scatter.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryScatter } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const ScatterExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.SCATTER,
     title: "VictoryScatter",
     content: (props) => (
       <VictoryScatter

website/src/pages/themes/_components/examples/stack.tsx

@@ -1,11 +1,16 @@
 import React from "react";
 import { VictoryArea, VictoryAxis, VictoryChart, VictoryStack } from "victory";
-import { NUM_STACKS, sampleStackData } from "../../_const";
+import {
+  NUM_STACKS,
+  sampleStackData,
+  VictoryComponentType,
+} from "../../_const";
 
 import { ExampleConfig } from "./example";
 
 export const StackExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.STACK,
     title: "VictoryStack",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>

website/src/pages/themes/_components/examples/voronoi.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryVoronoi } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const VoronoiExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.VORONOI,
     title: "VictoryVoronoi",
     content: (props) => (
       <VictoryVoronoi

website/src/pages/themes/_components/sideNavButton.tsx

@@ -36,7 +36,7 @@ const SideNavButton = ({
           isActive
             ? "text-orange-100"
             : "text-grayscale-300 group-hover:text-white group-disabled:text-grayscale-800",
-          "size-6",
+          "size-5",
         )}
       />
       <span className="mt-2">{item.title}</span>