fix(axes): fix AxisProps types to be correct

packages/axes/src/components/Axes.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Axis } from './Axis'
 import { positions } from '../props'
-import { AnyScale, SingleAxisProp, AxisValue } from '../types'
+import { AnyScale, AxisProps, AxisValue } from '../types'
 
 export const Axes = <X extends AxisValue, Y extends AxisValue>({
     xScale,
@@ -17,19 +17,19 @@ export const Axes = <X extends AxisValue, Y extends AxisValue>({
     yScale: AnyScale
     width: number
     height: number
-    top?: SingleAxisProp<X>
-    right?: SingleAxisProp<Y>
-    bottom?: SingleAxisProp<X>
-    left?: SingleAxisProp<Y>
+    top?: AxisProps<X>
+    right?: AxisProps<Y>
+    bottom?: AxisProps<X>
+    left?: AxisProps<Y>
 }) => {
     const axes = { top, right, bottom, left }
 
     return (
         <>
             {positions.map(position => {
                 const axis = axes[position] as typeof position extends 'bottom' | 'top'
-                    ? SingleAxisProp<X> | undefined
-                    : SingleAxisProp<Y> | undefined
+                    ? AxisProps<X> | undefined
+                    : AxisProps<Y> | undefined
 
                 if (!axis) return null
 

packages/axes/src/components/Axis.tsx

@@ -3,7 +3,7 @@ import { useSpring, useTransition, animated } from 'react-spring'
 import { useTheme, useMotionConfig } from '@nivo/core'
 import { computeCartesianTicks, getFormatter } from '../compute'
 import { AxisTick } from './AxisTick'
-import { AxisProps, AxisValue } from '../types'
+import { AnyScale, AxisProps, AxisValue } from '../types'
 
 export const Axis = <Value extends AxisValue>({
     axis,
@@ -23,7 +23,14 @@ export const Axis = <Value extends AxisValue>({
     legendOffset = 0,
     onClick,
     ariaHidden,
-}: AxisProps<Value>) => {
+}: AxisProps<Value> & {
+    axis: 'x' | 'y'
+    scale: AnyScale
+    x?: number
+    y?: number
+    length: number
+    onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>, value: Value | string) => void
+}) => {
     const theme = useTheme()
 
     const formatValue = useMemo(() => getFormatter(format, scale), [format, scale])

packages/axes/src/types.ts

@@ -55,7 +55,7 @@ export type AxisLegendPosition = 'start' | 'middle' | 'end'
 
 export type ValueFormatter<Value extends AxisValue> = (value: Value) => Value | string
 
-export interface SingleAxisProp<Value extends AxisValue> {
+export interface AxisProps<Value extends AxisValue = any> {
     ticksPosition?: 'before' | 'after'
     tickValues?: TicksSpec<Value>
     tickSize?: number
@@ -66,33 +66,14 @@ export interface SingleAxisProp<Value extends AxisValue> {
     legend?: React.ReactNode
     legendPosition?: AxisLegendPosition
     legendOffset?: number
+    ariaHidden?: boolean
 }
 
 export interface CanvasAxisProp<Value extends string | number | Date>
-    extends Omit<SingleAxisProp<Value>, 'legend'> {
+    extends Omit<AxisProps<Value>, 'legend'> {
     legend?: string
 }
 
-export interface AxisProps<Value extends AxisValue = any> {
-    axis: 'x' | 'y'
-    scale: AnyScale
-    x?: number
-    y?: number
-    length: number
-    ticksPosition: 'before' | 'after'
-    tickValues?: TicksSpec<Value>
-    tickSize?: number
-    tickPadding?: number
-    tickRotation?: number
-    format?: string | ValueFormatter<Value>
-    renderTick?: (props: AxisTickProps<Value>) => JSX.Element
-    legend?: React.ReactNode
-    legendPosition?: 'start' | 'middle' | 'end'
-    legendOffset?: number
-    onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>, value: Value | string) => void
-    ariaHidden?: boolean
-}
-
 export interface AxisTickProps<Value extends AxisValue> {
     tickIndex: number
     value: Value