Merge pull request #6 from faceless-ui/feat/types

Feat/types

README.md

@@ -5,7 +5,7 @@
 
 Read the full documentation [here](https://facelessui.com/docs/slider).
 
-### Installation
+## Installation
 
 ```bash
 $ npm i @faceless-ui/slider

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faceless-ui/slider",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage:": "https://facelessui.com/docs/slider",

src/Slide/index.tsx

@@ -14,13 +14,13 @@ export interface ISlide {
   isIntersecting: boolean
 }
 
-export interface Props extends HTMLProps<HTMLElement> {
+export interface SlideProps extends HTMLProps<HTMLElement> {
   index: number
   htmlElement?: React.ElementType
   children?: React.ReactNode
 }
 
-const Slide: React.FC<Props> = (props) => {
+const Slide: React.FC<SlideProps> = (props) => {
   const {
     index,
     htmlElement = 'div',

src/SliderProvider/context.tsx

@@ -1,9 +1,9 @@
 import { createContext } from 'react';
 import { MutableRefObject } from 'react';
 import { ISlide } from '../Slide';
-import { Props } from '../SliderProvider';
+import { SliderProviderProps } from '../SliderProvider';
 
-export interface ISliderContext extends Omit<Props, 'children'> {
+export interface ISliderContext extends Omit<SliderProviderProps, 'children'> {
   slidesToShow: number // NOTE: this is made required, the provider sets fallback if undefined in incoming props
   scrollOffset: number // NOTE: this is made required, the provider sets fallback if undefined in incoming props
   sliderTrackRef: MutableRefObject<HTMLElement | null>,

src/SliderProvider/index.tsx

@@ -15,7 +15,7 @@ import { useScrollToIndex } from './useScrollToIndex';
 
 export type ChildFunction = (context: ISliderContext) => React.ReactNode; // eslint-disable-line no-unused-vars
 
-export type Settings = {
+export type SliderSettings = {
   slidesToShow?: number
   slideOnSelect?: boolean
   scrollable?: boolean
@@ -31,17 +31,17 @@ export type Settings = {
   alignLastSlide?: 'trackLeft' | 'offsetLeft' | string | number
 }
 
-export type Props = Settings & {
+export type SliderProviderProps = SliderSettings & {
   children: React.ReactNode | ChildFunction
   currentSlideIndex?: number
   onSlide?: (index: number) => void // eslint-disable-line no-unused-vars
   pause?: boolean
   breakpoints?: {
-    [key: string]: Omit<Props, "children" | "breakpoints">
+    [key: string]: Omit<SliderProviderProps, "children" | "breakpoints">
   }
 }
 
-const SliderProvider: React.FC<Props> = (props) => {
+const SliderProvider: React.FC<SliderProviderProps> = (props) => {
   const {
     children,
     currentSlideIndex: slideIndexFromProps = 0,

src/SliderProvider/useAutoplay.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from "react";
 import { Action } from "./reducer";
 
-type Props = {
+type Args = {
   sliderTrackRef: React.MutableRefObject<HTMLDivElement | null>
   isFullyScrolled: boolean
   isPaused: boolean
@@ -10,14 +10,16 @@ type Props = {
   dispatchSliderState: (action: Action) => void // eslint-disable-line no-unused-vars
 }
 
-export const useAutoplay = (props: Props): null => {
+export type UseAutoplay = (args: Args) => null // eslint-disable-line no-unused-vars
+
+export const useAutoplay: UseAutoplay = (args) => {
   const {
     isPaused,
     enable,
     isFullyScrolled,
     autoplaySpeed,
     dispatchSliderState
-  } = props;
+  } = args;
 
   const animationRef = useRef<number | null>(null);
   const autoplayTimer = useRef<ReturnType<typeof setTimeout>>();

src/SliderProvider/useBreakpoints.ts

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Props, Settings } from './';
+import { SliderProviderProps, SliderSettings } from './';
 
-export const useBreakpoints = (props: Props): Settings => {
-  const [propsToUse, setPropsToShow] = useState<Props>(props);
+export type UseBreakpoints = (args: SliderProviderProps) => SliderSettings // eslint-disable-line no-unused-vars
+
+export const useBreakpoints: UseBreakpoints = (props): SliderSettings => {
+  const [propsToUse, setPropsToShow] = useState<SliderProviderProps>(props);
 
   const animationRef = useRef<number | null>(null);
 

src/SliderProvider/useDragScroll.ts

@@ -1,26 +1,21 @@
 import React, { useEffect, useState } from 'react';
 
-type Options = {
+type Args = {
   buttons?: number[]
   scrollYAxis?: boolean
   enable?: boolean
   ref: React.MutableRefObject<HTMLDivElement | null>
 }
 
-type UseDraggable = (options?: Options) => null // eslint-disable-line no-unused-vars
+export type UseDraggable = (args?: Args) => null // eslint-disable-line no-unused-vars
 
-/**
-  * Make an element scrollable by dragging
-  * @param buttons - Buttons user can drag with. See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
-  * @returns {React.MutableRefObject} -  The ref to be applied to to the element to make it draggable
-  */
-export const useDraggable: UseDraggable = (options) => {
+export const useDraggable: UseDraggable = (args) => {
   const {
-    buttons = [1, 4, 5],
+    buttons = [1, 4, 5], // See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
     scrollYAxis,
     enable,
     ref
-  } = options || {};
+  } = args || {};
 
   // Position of the mouse on the page on mousedown
   const [startX, setStartX] = useState(0);

src/SliderProvider/useMarquee.ts

@@ -1,21 +1,23 @@
 import { useCallback, useEffect, useRef } from "react";
 
-type Props = {
+type Args = {
   sliderTrackRef: React.MutableRefObject<HTMLDivElement | null>
   isFullyScrolled: boolean
   isPaused: boolean
   enable?: boolean
   marqueeSpeed?: number
 }
 
-export const useMarquee = (props: Props): null => {
+export type UseMarquee = (args: Args) => null // eslint-disable-line no-unused-vars
+
+export const useMarquee: UseMarquee = (args) => {
   const {
     sliderTrackRef,
     isFullyScrolled,
     enable,
     isPaused,
     marqueeSpeed // NOTE: this is technically a requested frame rate
-  } = props;
+  } = args;
 
   const animationRef = useRef<number | undefined>();
   const prevTimestamp = useRef<number | undefined>();

src/SliderProvider/useScrollToIndex.ts

@@ -1,22 +1,24 @@
 import { useCallback, useEffect, useRef } from "react";
-import { Props } from ".";
+import { SliderProviderProps } from ".";
 import { Action, SliderState } from "./reducer";
 
-type ScrollToIndexProps = {
+type Args = {
   sliderTrackRef: React.MutableRefObject<HTMLDivElement | null>
-  onSlide: Props["onSlide"]
+  onSlide: SliderProviderProps["onSlide"]
   sliderState: SliderState
   dispatchSliderState: (action: Action) => void // eslint-disable-line no-unused-vars
-  scrollOffset: Props["scrollOffset"]
+  scrollOffset: SliderProviderProps["scrollOffset"]
 }
 
-export const useScrollToIndex = (props: ScrollToIndexProps): null => {
+export type UseScrollToIndex = (args: Args) => null // eslint-disable-line no-unused-vars
+
+export const useScrollToIndex: UseScrollToIndex = (args) => {
   const {
     sliderState,
     onSlide,
     scrollOffset,
     sliderTrackRef
-  } = props;
+  } = args;
 
   const animationRef = useRef<number | undefined>();
   const prevScrollIndex = useRef<number | undefined>();

src/SliderTrack/getGhostSlideWidth.ts

@@ -1,6 +1,8 @@
 import { ISliderContext } from "../SliderProvider/context";
 
-export const getGhostSlideWidth = (sliderContext: ISliderContext): string => {
+export type GetGhostSlideWidth = (sliderContext: ISliderContext) => string; // eslint-disable-line no-unused-vars
+
+export const getGhostSlideWidth: GetGhostSlideWidth = (sliderContext) => {
   const {
     alignLastSlide,
     slidesToShow,

src/types.ts

@@ -0,0 +1,7 @@
+export { ISliderContext } from './SliderProvider/context';
+export { SliderSettings, SliderProviderProps } from './SliderProvider';
+export { ISlide, SlideProps } from './Slide';
+export { SliderProgressProps, ProgressIndicatorProps } from './SliderProgress';
+export { SliderButtonProps } from './SliderButton';
+export { DotsNavProps } from './DotsNav';
+export { SliderTrackProps } from './SliderTrack';