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

src/types.ts

@@ -1,11 +1,9 @@
 import { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale'
 import { CurveFactory, stackOffsetNone } from 'd3-shape'
-import { SetStateAction } from 'jotai'
 import React, { CSSProperties, RefObject } from 'react'
 import * as TSTB from 'ts-toolbelt'
 
 import { TooltipRendererProps } from './components/TooltipRenderer'
-import { SetAtom } from 'jotai/core/atom'
 
 export type ChartOptions<TDatum> = {
   data: UserSerie<TDatum>[]
@@ -88,13 +86,13 @@ export type ChartContextValue<TDatum> = {
     datum: Datum<TDatum>,
     focusedDatum: Datum<TDatum> | null
   ) => DatumStyles
-  useAxisDimensionsAtom: () => [
+  axisDimensionsState: [
     AxisDimensions,
-    SetAtom<SetStateAction<AxisDimensions>>
+    React.Dispatch<React.SetStateAction<AxisDimensions>>
   ]
-  useFocusedDatumAtom: () => [
+  focusedDatumState: [
     Datum<TDatum> | null,
-    SetAtom<SetStateAction<Datum<TDatum> | null>>
+    React.Dispatch<React.SetStateAction<Datum<TDatum> | null>>
   ]
 }
 
@@ -228,12 +226,6 @@ export type AxisOptionsBase = {
   curve?: CurveFactory
   invert?: boolean
   position: Position
-  // tickCount?: number
-  // minTickCount?: number
-  // maxTickCount?: number
-  // tickValues?: unknown[]
-  // tickSizeInner?: number
-  // tickSizeOuter?: number
   minTickPaddingForRotation?: number
   tickLabelRotationDeg?: number
   innerBandPadding?: number
@@ -242,8 +234,6 @@ export type AxisOptionsBase = {
   maxBandSize?: number
   minDomainLength?: number
   showGrid?: boolean
-  // showTicks?: boolean
-  // filterTicks?: <T extends string>(ticks: T[]) => T[]
   show?: boolean
   stacked?: boolean
   stackOffset?: typeof stackOffsetNone
@@ -328,17 +318,10 @@ export type AxisOptions<TDatum> =
 
 export type ResolvedAxisOptions<TAxisOptions> = TSTB.Object.Required<
   TAxisOptions & {},
-  // | 'tickCount'
-  // | 'minTickCount'
-  // | 'maxTickCount'
-  // | 'tickSizeInner'
-  // | 'tickSizeOuter'
   | 'minTickPaddingForRotation'
   | 'tickLabelRotationDeg'
   | 'innerBandPadding'
   | 'outerBandPadding'
-  // | 'showTicks'
-  // | 'filterTicks'
   | 'show'
   | 'stacked'
 >
@@ -349,24 +332,6 @@ export type AxisBase<TDatum> = {
   _?: TDatum
   isVertical: boolean
   range: [number, number]
-  // isPrimary?: boolean
-  // primaryAxisId?: string
-  // isTimeType: boolean
-  // uniquePrimariesSet: Set<unknown>
-  // barSize: number
-  // cursorSize: number
-  // stepSize: number
-  // seriesBandScale?: ScaleBand<string>
-  // seriesBarSize: number
-  // domain: [unknown, unknown] | unknown[]
-  // directionMultiplier: -1 | 1
-  // transform: typeof translateX | typeof translateY
-  // ticks: unknown[]
-  // format: (value: unknown, index: number) => string
-  // tickSpacing: number
-  // tickOffset: number
-  // barOffset: number
-  // gridOffset: number
 }
 
 export type AxisTime<TDatum> = Omit<