@silas-test/molecules-slider 0.1.0

package/src/lib/molecules-slider.type.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Props for the Modal component.
+ * @typedef {Object} SliderProps
+ * @property {string} [id] - Component identification.
+ * @property {string} [dataTestId] - React-testing-library identification.
+ * @property {string} [currentPage] - The current page of the slider.
+ * @property {number} [slidesPerPage] - Number of slides that should be shown per page. On mobile, it will automatically be 1.
+ * @property {boolean} [showArrows] - Boolean representing if the arrows for next and previous page should be displayed. On mobile, they will be automatically hidden.
+ * @property {boolean} [showBullets] - Boolean representing if the bullets representing the pages should be displayed.
+ * @property {number} [duration] - Durations in milliseconds of each slide. If 0 is provided, they will not change automatically.
+ * @property {React.ReactNode | React.ReactNode[]} [children] - The content of the Sliders. This should be a SliderItem with the content inside.
+ * @property {(index?: number) => void} [onChange] - Function that runs when a slide change if you need to run any code when it changes.
+ */
+export type SliderProps = {
+    id?: string;
+    dataTestId?: string;
+    currentPage: number;
+    slidesPerPage?: number;
+    showArrows?: boolean;
+    showBullets?: boolean;
+    duration?: number;
+    count?: number;
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * Function that runs when a slide change if you need to run any code when it changes.
+     *
+     * @example
+     * ```ts
+     * <Slider onChange={(index: number) => console.log(index)} {...props}>
+     *  <SliderItem>
+     *   <p>slide 1</p>
+     *  </SliderItem>
+     *  <SliderItem>
+     *    <p>slide 2</p>
+     *  </SliderItem>
+     *  <SliderItem>
+     *    <p>slide 3</p>
+     *  </SliderItem>
+     *</Slider>
+     * ```
+     */
+    onChange?: (index: number) => void;
+};
+/**
+ * Props for the Modal component.
+ * @typedef {Object} SliderItemProps
+ * @property {React.ReactNode | React.ReactNode[]} [children] - The content of the SliderItem.
+ */
+export type SliderItemProps = {
+    children: React.ReactNode | React.ReactNode[];
+};