refactor(slider): 🎨 improve types for all slide comps

adaptui · Sep 3, 2020 · fae66c2 · fae66c2
1 parent e856e63
commit fae66c2
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 27 deletions.
diff --git a/src/slider/Slider.ts b/src/slider/Slider.ts
@@ -5,14 +5,20 @@
  * to work with Reakit System
  */
 import { useForkRef } from "reakit-utils";
-import { BoxHTMLProps, useBox } from "reakit";
 import { ariaAttr } from "@chakra-ui/utils";
+import { BoxHTMLProps, BoxOptions, useBox } from "reakit";
 import { createComponent, createHook } from "reakit-system";
 
 import { SLIDER_KEYS } from "./__keys";
 import { SliderStateReturn } from "./SliderState";
 
-export const useSlider = createHook<SliderStateReturn, BoxHTMLProps>({
+export type SliderOptions = BoxOptions & SliderStateReturn;
+
+export type SliderHTMLProps = BoxHTMLProps;
+
+export type SliderProps = SliderOptions & SliderHTMLProps;
+
+export const useSlider = createHook<SliderOptions, SliderHTMLProps>({
   name: "Slider",
   compose: useBox,
   keys: SLIDER_KEYS,

diff --git a/src/slider/SliderFilledTrack.ts b/src/slider/SliderFilledTrack.ts
@@ -4,28 +4,36 @@
  * We improved the hook [useSlider](https://github.com/chakra-ui/chakra-ui/blob/af613020125265914a9dcb74c92a07a16aa4ff8e/packages/slider/src/use-slider.ts)
  * to work with Reakit System
  */
-import { BoxHTMLProps, useBox } from "reakit";
+import { BoxHTMLProps, BoxOptions, useBox } from "reakit";
 import { createComponent, createHook } from "reakit-system";
 
 import { SliderStateReturn } from "./SliderState";
 import { SLIDER_FILLED_TRACK_KEYS } from "./__keys";
 
-export const useSliderFilledTrack = createHook<SliderStateReturn, BoxHTMLProps>(
-  {
-    name: "SliderFilledTrack",
-    compose: useBox,
-    keys: SLIDER_FILLED_TRACK_KEYS,
+export type SliderFilledTrackOptions = BoxOptions & SliderStateReturn;
 
-    useProps(options, { style: htmlStyle, ...htmlProps }) {
-      const { styles } = options;
+export type SliderFilledTrackHTMLProps = BoxHTMLProps;
 
-      return {
-        ...htmlProps,
-        style: { ...htmlStyle, ...styles.innerTrackStyle },
-      };
-    },
+export type SliderFilledTrackProps = SliderFilledTrackOptions &
+  SliderFilledTrackHTMLProps;
+
+export const useSliderFilledTrack = createHook<
+  SliderFilledTrackOptions,
+  SliderFilledTrackHTMLProps
+>({
+  name: "SliderFilledTrack",
+  compose: useBox,
+  keys: SLIDER_FILLED_TRACK_KEYS,
+
+  useProps(options, { style: htmlStyle, ...htmlProps }) {
+    const { styles } = options;
+
+    return {
+      ...htmlProps,
+      style: { ...htmlStyle, ...styles.innerTrackStyle },
+    };
   },
-);
+});
 
 export const SliderFilledTrack = createComponent({
   as: "div",

diff --git a/src/slider/SliderInput.ts b/src/slider/SliderInput.ts
@@ -4,13 +4,22 @@
  * We improved the hook [useSlider](https://github.com/chakra-ui/chakra-ui/blob/af613020125265914a9dcb74c92a07a16aa4ff8e/packages/slider/src/use-slider.ts)
  * to work with Reakit System
  */
-import { InputHTMLProps, useInput } from "reakit";
 import { createComponent, createHook } from "reakit-system";
+import { InputHTMLProps, InputOptions, useInput } from "reakit";
 
 import { SLIDER_INPUT_KEYS } from "./__keys";
 import { SliderStateReturn } from "./SliderState";
 
-export const useSliderInput = createHook<SliderStateReturn, InputHTMLProps>({
+export type SliderInputOptions = InputOptions & SliderStateReturn;
+
+export type SliderInputHTMLProps = InputHTMLProps;
+
+export type SliderInputProps = SliderInputOptions & SliderInputHTMLProps;
+
+export const useSliderInput = createHook<
+  SliderInputOptions,
+  SliderInputHTMLProps
+>({
   name: "SliderInput",
   compose: useInput,
   keys: SLIDER_INPUT_KEYS,

diff --git a/src/slider/SliderThumb.ts b/src/slider/SliderThumb.ts
@@ -27,7 +27,14 @@ export type SliderThumbOptions = SliderStateReturn & {
   getAriaValueText?(value: number): string;
 };
 
-export const useSliderThumb = createHook<SliderThumbOptions, BoxHTMLProps>({
+export type SliderThumbHTMLProps = BoxHTMLProps;
+
+export type SliderThumbProps = SliderThumbOptions & SliderThumbHTMLProps;
+
+export const useSliderThumb = createHook<
+  SliderThumbOptions,
+  SliderThumbHTMLProps
+>({
   name: "SliderThumb",
   compose: useBox,
   keys: SLIDER_THUMB_KEYS,

diff --git a/src/slider/SliderTrack.ts b/src/slider/SliderTrack.ts
@@ -7,20 +7,28 @@
 import { useId } from "@chakra-ui/hooks";
 import { useForkRef } from "reakit-utils";
 import { dataAttr } from "@chakra-ui/utils";
-import { BoxHTMLProps, useBox } from "reakit";
+import { BoxHTMLProps, BoxOptions, useBox } from "reakit";
 import { createComponent, createHook } from "reakit-system";
 
 import { SLIDER_TRACK_KEYS } from "./__keys";
 import { SliderStateReturn } from "./SliderState";
 
-export type SliderTrackOptions = SliderStateReturn & {
-  /**
-   * The base `id` to use for the sliderTrack
-   */
-  id?: string;
-};
+export type SliderTrackOptions = BoxOptions &
+  SliderStateReturn & {
+    /**
+     * The base `id` to use for the sliderTrack
+     */
+    id?: string;
+  };
 
-export const useSliderTrack = createHook<SliderTrackOptions, BoxHTMLProps>({
+export type SliderTrackHTMLProps = BoxHTMLProps;
+
+export type SliderTrackProps = SliderTrackOptions & SliderTrackHTMLProps;
+
+export const useSliderTrack = createHook<
+  SliderTrackOptions,
+  SliderTrackHTMLProps
+>({
   name: "SliderTrack",
   compose: useBox,
   keys: SLIDER_TRACK_KEYS,