reaviz · amcdnl · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024
diff --git a/next.config.js b/next.config.js
@@ -7,12 +7,13 @@ const withNextra = require('nextra')({
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   eslint: {
     ignoreDuringBuilds: true
   },
   experimental: {
     scrollRestoration: true,
+    webpackBuildWorker: true
   },
   typescript: {
     ignoreBuildErrors: true

diff --git a/package.json b/package.json
@@ -22,11 +22,11 @@
     "d3-time": "^3.1.0",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.0.28",
-    "next": "^14",
-    "nextra": "^2.13.4",
-    "posthog-js": "^1.131.4",
-    "reablocks": "^7.9.2",
-    "reablocks-docs-theme": "^0.0.2",
+    "next": "^14.2.3",
+    "nextra": "2.13.4",
+    "posthog-js": "^1.136.8",
+    "reablocks": "^7.10.1",
+    "reablocks-docs-theme": "1.0.2",
     "react": "^18",
     "react-dom": "^18",
     "react-syntax-highlighter": "^15.5.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ui/toggle-canvas.tsx b/src/components/ui/toggle-canvas.tsx
@@ -25,7 +25,7 @@ export const ToggleCanvas: FC<ToggleCanvasProps> = ({ storybook, ...props }) =>
           storybook ? [{
             title: 'View Storybook',
             onClick: () => {
-              window.open(`https://reaviz.dev/?path=/story/${storybook}`, '_blank');
+              window.open(`https://storybook.reaviz.dev/?path=/story/${storybook}`, '_blank');
             }
           }] : []
         )

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -23,7 +23,7 @@ export default function Document() {
         />
       </Head>
       <body>
-        <Main />
+        <Main suppressHydrationWarning />
         <NextScript />
       </body>
     </Html>

diff --git a/src/pages/docs/charts/bar-chart.mdx b/src/pages/docs/charts/bar-chart.mdx
@@ -35,12 +35,34 @@ Types supported by reaviz:
 - [Marimekko](/docs/charts/bar-chart#marimekko)
 - [Sparkline](/docs/charts/bar-chart#sparkline)
 - [Waterfall](/docs/charts/bar-chart#waterfall)
-- [Histograms](/docs/charts/bar-chart#histograms)
+- [Histogram](/docs/charts/bar-chart#histograms)
+
+## Quick Start
+To create a Bar chart, use import the `BarChart` and give it `data`. The chart
+will automatically configure itself with the default options exposed via `props`.
+
+```jsx
+import { BarChart } from 'reaviz';
+
+const MyChart = () => (
+  <BarChart
+    height={300}
+    width={300}
+    data={[
+      { key: 'DLP', data: 13 },
+      { key: 'SIEM', data: 2 },
+      { key: 'Endpoint', data: 7 }
+    ]}
+  />
+);
+```
 
 ## Examples
 
 ### Single Series Vertical
 <ToggleCanvas of={BarChartVerticalStory.Simple} storybook="charts-bar-chart-vertical-single-series--simple" />
+
+
 ### Single Series Horizontal
 <ToggleCanvas of={BarChartHorizontal.Simple} storybook="charts-bar-chart-horizontal-single-series--simple" />
 
@@ -51,16 +73,19 @@ Types supported by reaviz:
 
 ### Stacked Vertical
 <ToggleCanvas of={BarChartVerticalMultiSeries.Stacked} storybook="charts-bar-chart-vertical-multi-series--stacked" />
+
 ### Stacked Horizontal
 <ToggleCanvas of={BarChartHorizontalMultiSeries.Stacked} storybook="charts-bar-chart-horizontal-multi-series--stacked" />
 
 ### Stacked Normalized Vertical
 <ToggleCanvas of={BarChartVerticalMultiSeries.StackedNormalized} storybook="charts-bar-chart-vertical-multi-series--stacked-normalized" />
+
 ### Stacked Normalized Horizontal
 <ToggleCanvas of={BarChartHorizontalMultiSeries.StackedNormalized} storybook="charts-bar-chart-horizontal-multi-series--stacked-normalized" />
 
 ### Stacked Diverging Vertical
 <ToggleCanvas of={BarChartVerticalMultiSeries.StackedDiverging} storybook="charts-bar-chart-vertical-multi-series--stacked-diverging" />
+
 ### Stacked Diverging Horizontal
 <ToggleCanvas of={BarChartHorizontalMultiSeries.StackedDiverging} storybook="charts-bar-chart-horizontal-multi-series--stacked-diverging" />
 
@@ -76,26 +101,6 @@ Types supported by reaviz:
 ### Histograms
 <ToggleCanvas of={BarChartVerticalHistogram.Dates} storybook="charts-bar-chart-vertical-histogram--dates" />
 
-## Quick Start
-To create a Bar chart, use import the `BarChart` and give it `data`. The chart
-will automatically configure itself with the default options exposed via `props`.
-
-```jsx
-import { BarChart } from 'reaviz';
-
-const MyChart = () => (
-  <BarChart
-    height={300}
-    width={300}
-    data={[
-      { key: 'DLP', data: 13 },
-      { key: 'SIEM', data: 2 },
-      { key: 'Endpoint', data: 7 }
-    ]}
-  />
-);
-```
-
 ## API
 ### [BarChart](https://github.com/reaviz/reaviz/blob/master/src/BarChart/BarChart.tsx)
 <PropsTable name="BarChart" />

diff --git a/src/pages/docs/charts/bar-list.mdx b/src/pages/docs/charts/bar-list.mdx
@@ -3,16 +3,10 @@ import { Canvas, Meta } from '@storybook/blocks';
 import { ToggleCanvas } from '@/components/ui/toggle-canvas';
 import * as BarListStory from '../../../stories/components/BarList.story.tsx';
 
-<Meta of={BarListStory} />
-
 # Bar List
 
 Horizontal bars with a label.
 
-## Examples
-
-<ToggleCanvas of={BarListStory.Simple} storybook="charts-bar-list--simple" />
-
 ## Quick Start
 To create a Bar List, use import the `BarList` and give it `data`. The chart
 will automatically configure itself with the default options exposed via `props`.
@@ -31,6 +25,10 @@ const MyChart = () => (
 );
 ```
 
+## Examples
+<Meta of={BarListStory} />
+<ToggleCanvas of={BarListStory.Simple} storybook="charts-bar-list--simple" />
+
 ## API
 ### [BarList](https://github.com/reaviz/reaviz/blob/master/src/BarList/BarList.tsx)
 <PropsTable name="BarList" />

diff --git a/src/pages/docs/charts/bubble-chart.mdx b/src/pages/docs/charts/bubble-chart.mdx
@@ -14,10 +14,6 @@ A Bubble chart visualizes data using circles ('bubbles') where the size represen
 - Offers the ability to represent diverse datasets by incorporating multiple bubble sizes and colors.
 - Enables a clear visual analysis of data points with varying values, revealing patterns and correlations.
 
-## Examples
-
-<ToggleCanvas of={BubbleChartStory.Simple} storybook="charts-bubble-chart--simple" />
-
 ## Quick Start
 To create a bubble chart, use import the `BubbleChart` and give it `data`. The chart
 will automatically configure itself with the default options exposed via `props`.
@@ -38,6 +34,9 @@ const MyChart = () => (
 );
 ```
 
+## Examples
+<ToggleCanvas of={BubbleChartStory.Simple} storybook="charts-bubble-chart--simple" />
+
 ## API
 ### [BubbleChart](https://github.com/reaviz/reaviz/blob/master/src/BubbleChart/BubbleChart.tsx)
 <PropsTable name="BubbleChart" />

diff --git a/src/pages/docs/charts/funnel-chart.mdx b/src/pages/docs/charts/funnel-chart.mdx
@@ -11,10 +11,6 @@ A funnel chart is used to show streamlined data; each slice in the
 funnel represents a process that has filtered out data. The last funnel
 bears the value that is the final result of the entire procedure.
 
-## Examples
-
-<ToggleCanvas of={FunnelChartStory.Basic} storybook="charts-funnel-chart--basic" />
-
 ## Quick Start
 To create a funnel chart, use import the `FunnelChart` and give it some `data`.
 
@@ -45,6 +41,10 @@ const MyChart = () => (
 );
 ```
 
+## Examples
+
+<ToggleCanvas of={FunnelChartStory.Basic} storybook="charts-funnel-chart--basic" />
+
 ## API
 
 ### [FunnelChart](https://github.com/reaviz/reaviz/blob/master/src/FunnelChart/FunnelChart.tsx)

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -3,10 +3,10 @@
 @tailwind utilities;
 
 /* Import styles for reablocks nextra theme  */
-@import "node_modules/reablocks-docs-theme/style.css";
+@import "reablocks-docs-theme/style.css";
 
 /* Import pre generated styles for default reablocks theme  */
-@import "node_modules/reablocks/dist/index.css";
+@import "reablocks/index.css";
 
 html.light {
   --background: #ffffff;

diff --git a/theme.config.tsx b/theme.config.tsx
@@ -66,6 +66,8 @@ const config: DocsThemeConfig = {
   },
   sidebar: {
     defaultMenuCollapseLevel: 3,
+    autoCollapse: false,
+    toggleButton: true
   },
   footer: {
     component: (