fix: remove jotai

Author: tannerlinsley

package.json

@@ -134,7 +134,6 @@
     "d3-scale": "^3.3.0",
     "d3-shape": "^2.1.0",
     "d3-time": "^2.1.1",
-    "jotai": "^1.1.3",
     "ts-toolbelt": "^9.6.0"
   }
 }

src/components/AxisLinear.useMeasure.ts

@@ -30,9 +30,9 @@ export default function useMeasure<TDatum>({
   showRotated: boolean
   setShowRotated: (value: boolean) => void
 }) {
-  const { useAxisDimensionsAtom } = useChartContext<TDatum>()
+  const { axisDimensionsState } = useChartContext<TDatum>()
 
-  const [axisDimensions, setAxisDimensions] = useAxisDimensionsAtom()
+  const [axisDimensions, setAxisDimensions] = axisDimensionsState
 
   const axisDimension = React.useMemo(() => {
     return axisDimensions[axis.position as Position]?.[axis.id!]

src/components/Chart.tsx

@@ -1,6 +1,5 @@
 import { groups, sort } from 'd3-array'
 import { stack, stackOffsetNone } from 'd3-shape'
-import { atom, useAtom } from 'jotai'
 import React, { ComponentPropsWithoutRef } from 'react'
 
 import useGetLatest from '../hooks/useGetLatest'
@@ -229,36 +228,20 @@ function ChartInner<TDatum>({
   const svgRef = React.useRef<SVGSVGElement>(null)
   const getOptions = useGetLatest(options)
 
-  const axisDimensionsAtom = React.useMemo(
-    () =>
-      atom<AxisDimensions>({
-        left: {},
-        right: {},
-        top: {},
-        bottom: {},
-      }),
-    []
-  )
+  const axisDimensionsState = React.useState<AxisDimensions>({
+    left: {},
+    right: {},
+    top: {},
+    bottom: {},
+  })
 
-  const focusedDatumAtom = React.useMemo(
-    () => atom<Datum<TDatum> | null>(null),
-    []
-  )
+  const [axisDimensions] = axisDimensionsState
 
-  const useAxisDimensionsAtom = React.useCallback(() => {
-    // eslint-disable-next-line
-    return useAtom(axisDimensionsAtom)
-  }, [axisDimensionsAtom])
-  const useFocusedDatumAtom = React.useCallback(() => {
-    // eslint-disable-next-line
-    return useAtom(focusedDatumAtom)
-  }, [focusedDatumAtom])
+  const focusedDatumState = React.useState<Datum<TDatum> | null>(null)
+  const [focusedDatum] = focusedDatumState
 
   // useAtom<Datum<TDatum> | null>(focusedDatumAtom)
 
-  const [axisDimensions] = useAxisDimensionsAtom()
-  const [focusedDatum] = useFocusedDatumAtom()
-
   const gridDimensions = React.useMemo((): GridDimensions => {
     // Left
     const [axesLeftWidth, axesLeftTop, axesLeftBottom] = (
@@ -593,8 +576,8 @@ function ChartInner<TDatum>({
     height,
     getSeriesStatusStyle,
     getDatumStatusStyle,
-    useAxisDimensionsAtom,
-    useFocusedDatumAtom,
+    axisDimensionsState,
+    focusedDatumState,
     svgRef,
   }
 

src/components/Cursors.tsx

@@ -80,12 +80,12 @@ function Cursor<TDatum>(props: {
     getOptions,
     svgRef,
     gridDimensions,
-    useFocusedDatumAtom,
+    focusedDatumState,
     primaryAxis,
     secondaryAxes,
   } = useChartContext<TDatum>()
 
-  const [focusedDatum] = useFocusedDatumAtom()
+  const [focusedDatum] = focusedDatumState
   const latestFocusedDatum = useLatestWhen(focusedDatum, !!focusedDatum)
 
   const secondaryAxis = secondaryAxes.find(

src/components/Tooltip.tsx

@@ -39,15 +39,15 @@ function defaultTooltip<TDatum>(
 
 export default function Tooltip<TDatum>(): React.ReactPortal | null {
   const {
-    useFocusedDatumAtom,
+    focusedDatumState,
     getOptions,
     primaryAxis,
     secondaryAxes,
     getDatumStatusStyle,
     svgRef,
   } = useChartContext<TDatum>()
 
-  const [focusedDatum] = useFocusedDatumAtom()
+  const [focusedDatum] = focusedDatumState
   const latestFocusedDatum = useLatestWhen(focusedDatum, !!focusedDatum)
 
   const preTooltipOptions = getOptions().tooltip ?? true

src/components/Voronoi.tsx

@@ -6,9 +6,9 @@ import { getPrimary, translate } from '../utils/Utils'
 import useChartContext from '../utils/chartContext'
 
 export default function Voronoi<TDatum>() {
-  const { getOptions, useFocusedDatumAtom } = useChartContext<TDatum>()
+  const { getOptions, focusedDatumState } = useChartContext<TDatum>()
 
-  const [, setFocusedDatum] = useFocusedDatumAtom()
+  const [, setFocusedDatum] = focusedDatumState
 
   const {
     onFocusDatum,

src/hooks/useRect.ts

@@ -1,6 +1,5 @@
 import observeRect from '@reach/observe-rect'
 import React from 'react'
-// import observeRect from '../utils/observe-rect'
 
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
 

src/seriesTypes/Area.tsx

@@ -26,13 +26,13 @@ export default function AreaComponent<TDatum>({
   const {
     getSeriesStatusStyle,
     getDatumStatusStyle,
-    useFocusedDatumAtom,
+    focusedDatumState,
     gridDimensions,
   } = useChartContext<TDatum>()
 
   const curve = secondaryAxis.curve ?? monotoneX
 
-  const [focusedDatum] = useFocusedDatumAtom()
+  const [focusedDatum] = focusedDatumState
 
   return (
     <g

src/seriesTypes/Bar.tsx

@@ -24,11 +24,11 @@ export default function BarComponent<TDatum>({
   const {
     getSeriesStatusStyle,
     getDatumStatusStyle,
-    useFocusedDatumAtom,
+    focusedDatumState,
     gridDimensions,
   } = useChartContext<TDatum>()
 
-  const [focusedDatum] = useFocusedDatumAtom()
+  const [focusedDatum] = focusedDatumState
 
   return (
     <g

src/seriesTypes/Line.tsx

@@ -23,13 +23,13 @@ export default function Line<TDatum>({
   const {
     getSeriesStatusStyle,
     getDatumStatusStyle,
-    useFocusedDatumAtom,
+    focusedDatumState,
     gridDimensions,
   } = useChartContext<TDatum>()
 
   const curve = secondaryAxis.curve ?? monotoneX
 
-  const [focusedDatum] = useFocusedDatumAtom()
+  const [focusedDatum] = focusedDatumState
 
   return (
     <g