@maycolem/stories 1.0.0

package/dist/src/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/src/components/ManagmentStoryComponent.d.ts

@@ -0,0 +1,11 @@
+import { IBettingStory, IPromoStory, IStory } from '../types/types';
+declare const ManagmentStoryComponent: ({ story }: {
+    story: IStory;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ManagmentStoryComponent;
+export declare const PromoStory: ({ story }: {
+    story: IPromoStory;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BetCouponStory: ({ story }: {
+    story: IBettingStory;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ProfileStories.d.ts

@@ -0,0 +1,4 @@
+declare const ProfileStories: ({ className }: {
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ProfileStories;

package/dist/src/components/ProfileStory.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    image: any;
+    title?: any;
+    color: any;
+    className?: any;
+    onProfileClick?: any;
+    width?: string;
+}
+declare const ProfileStory: ({ image, title, color, className, onProfileClick, width, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ProfileStory;

package/dist/src/components/StoryHeaderPlayer.d.ts

@@ -0,0 +1,7 @@
+declare const StoryHeaderPlayer: ({ story, onProfileClick, color, image, }: {
+    story: any;
+    onProfileClick?: (() => null) | undefined;
+    color: any;
+    image: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StoryHeaderPlayer;

package/dist/src/components/StoryPlayer.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { StoriesProps } from './StoryPlayerTypes';
+interface Props extends StoriesProps {
+    loop?: boolean;
+    currentIndex?: any;
+    onAllStoriesEnd?: any;
+    onOverlayClick?: any;
+    inline?: boolean;
+}
+declare const StoryPlayer: React.FC<Props>;
+export default StoryPlayer;

package/dist/src/components/StoryPlayerTypes.d.ts

@@ -0,0 +1,118 @@
+import { default as React } from 'react';
+/**
+ * Interface de cada objeto de historia que acepta <Stories stories={[ ... ]} />
+ */
+export interface IStoryObject {
+    /** Tipo de historia:
+     *  - `"image"` → renderiza una imagen con `url`
+     *  - `"video"` → renderiza un reproductor de video con `url`
+     *  - `"component"` → renderiza un componente React personalizado (campo `component`)
+     */
+    type: "image" | "video" | "component";
+    /** URL de la imagen o video (solo para `type: "image" | "video"`) */
+    url?: string;
+    /** Duración en milisegundos de este slide. Si no se define, se usa `defaultDuration`. */
+    duration?: number;
+    /** Componente React a renderizar cuando `type: "component"` */
+    component?: React.ComponentType<any>;
+    /** Componente React que se muestra como cabecera de la story (por arriba) */
+    header?: React.ReactNode;
+    /**
+     * Texto, booleano o componente que activa “See More”.
+     * - Si es `string`, se muestra ese texto como enlace.
+     * - Si es `boolean` (`true`), aparece un “See More” genérico.
+     * - Si es componente React, se renderiza directamente.
+     */
+    seeMore?: string | boolean | React.ReactNode;
+    /** Componente React que se monta en un overlay al hacer click en “See More” */
+    seeMoreComponent?: React.ReactNode;
+    /** Callback que se dispara al hacer click en “See More”. Recibe el índice actual (número). */
+    onSeeMoreClick?: (index: number) => void;
+}
+/**
+ * Interfaz para sobreescribir nombres de clase en distintas secciones de Stories
+ */
+export interface IStoryClassNames {
+    /** Clase para el contenedor principal de todo el componente Stories */
+    main?: string;
+    /** Clase para el contenedor que engloba la línea de progreso */
+    progressContainer?: string;
+    /** Clase para cada “caja” de progreso individual */
+    progressBarContainer?: string;
+    /** Clase para la propia barra de progreso (el elemento que crece) */
+    progressBar?: string;
+    /** Clase para el contenedor de cada historia (imagen/video/componente) */
+    storyContainer?: string;
+}
+/**
+ * Props que acepta el componente <Stories /> de stories-react
+ */
+export interface StoriesProps {
+    /** Arreglo de objetos de historia a renderizar (IStoryObject[]) */
+    stories: IStoryObject[];
+    /**
+     * Altura del contenedor de historias.
+     * Puede ser "100%" (por defecto) u otra unidad CSS (ej. "400px").
+     * @default "100%"
+     */
+    height?: string;
+    /**
+     * Ancho del contenedor de historias.
+     * Puede ser "100%" (por defecto) u otra unidad CSS (ej. "300px").
+     * @default "100%"
+     */
+    width?: string;
+    /**
+     * Callback que se llama cada vez que cambia la historia, recibiendo
+     * el índice (número) de la story que acaba de mostrarse.
+     */
+    onStoryChange?: (index: number) => void;
+    /**
+     * Callback que se llama una sola vez, cuando se renderiza la primera story.
+     * Útil para inicializar lógica de “comienzo”.
+     */
+    onStoriesStart?: () => void;
+    /**
+     * Callback que se dispara una sola vez cuando se completa la última historia
+     * del arreglo.
+     */
+    onAllStoriesEnd?: () => void;
+    /**
+     * Índice de la historia que debe mostrarse primero.
+     * Si se pasa, arranca en esa posición en lugar de en 0.
+     */
+    currentIndex?: number;
+    /**
+     * Duración por defecto (en milisegundos) que se usará cuando un IStoryObject
+     * no especifique `duration`.
+     * @default 10000
+     */
+    defaultDuration?: number;
+    /**
+     * Permite sobreescribir las clases CSS en distintas secciones internas
+     * usando la interfaz IStoryClassNames.
+     * @default {}
+     */
+    classNames?: IStoryClassNames;
+    /**
+     * Si se pone `false`, el slide sigue avanzando aunque el usuario cambie de pestaña
+     * o minimice la ventana. Por defecto está en `true` (pausa cuando la ventana no está activa).
+     * @default true
+     */
+    pauseStoryWhenInActiveWindow?: boolean;
+}
+/**
+ * Props que recibe un “componente personalizado” cuando lo usas como `type: "component"`.
+ * ReactInstaStories le inyecta estas propiedades para que controle
+ * pausa/reproducción desde dentro del componente.
+ */
+export interface CustomStoryComponentProps {
+    /** Llamar para pausar la historia actual desde el componente */
+    pause: () => void;
+    /** Llamar para reanudar la historia actual desde el componente */
+    resume: () => void;
+    /** Objeto IStoryObject con los datos de la historia actual */
+    story: IStoryObject;
+    /** Indica si la story está actualmente en pausa (`true`) o reproduciéndose (`false`) */
+    isPaused: boolean;
+}

package/dist/src/components/dataMock-IA.d.ts

@@ -0,0 +1,2 @@
+import { IStoriesProfile } from '../types/types';
+export declare const storiesDataAll: IStoriesProfile[];

package/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+export { default as MyStory } from './App';
+export { default as ProfileStories } from './components/ProfileStories';
+export { default as StoryPlayer } from './components/StoryPlayer';
+export { default as ProfileStory } from './components/ProfileStory';
+export { default as ManagmentStoryComponent } from './components/ManagmentStoryComponent';
+export { default as StoryHeaderPlayer } from './components/StoryHeaderPlayer';

package/dist/src/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/types/types.d.ts

@@ -0,0 +1,150 @@
+export interface IStoriesProfile {
+    id: string;
+    stories: IStory[];
+    is_published: boolean;
+    show_red_chip: boolean;
+    order_index: number;
+    avatar: string;
+    name: string;
+    description: string;
+    color: string;
+}
+export type IStory = IBettingStory | IPromoStory;
+export interface IBaseStory {
+    id: string;
+    title: string;
+    description: string;
+    image: string;
+    duration: number;
+    clicks: number | null;
+    views: number | null;
+    type: string;
+}
+export interface IBettingStory extends IBaseStory {
+    type: "betting";
+    btn_text: string;
+    matches: string[];
+    markets: string[];
+    results: string[];
+    coupon: string;
+    coupon_title: string;
+    coupon_result: CouponResult;
+}
+export interface IPromoStory extends IBaseStory {
+    type: "promo";
+    btn_text: string;
+    btn_url: string;
+}
+export interface CouponResult {
+    stakes: Stake[];
+    selections: Selection[];
+    betType: number;
+    stakeAdjustment: StakeAdjustment;
+    fullCoverData: FullCoverData;
+}
+export interface Stake {
+    value: number;
+    preciseValue: number;
+    type: number;
+    isEnabled: boolean;
+    isHighlighted: boolean;
+}
+export interface Selection {
+    odd: Odd;
+    event: Event;
+    status: number;
+    isBanker: boolean;
+    isEnabled: boolean;
+    sport: Sport;
+    category: Category;
+    competitors: Competitor[];
+    championship: Championship;
+    market: Market;
+    widgetInfo: WidgetInfo;
+}
+export interface Odd {
+    typeId: number;
+    price: number;
+    isMB: boolean;
+    oddStatus: number;
+    id: number;
+    name: string;
+    shouldUpdate: boolean;
+    lineDir?: number;
+    priceDir?: number;
+}
+export interface Event {
+    marketIds: number[];
+    isBooked: boolean;
+    isParlay: boolean;
+    offers?: {
+        type: number;
+    }[];
+    code: number;
+    hasStream: boolean;
+    extId: string;
+    sc: number;
+    rc: boolean;
+    pId: number;
+    et: number;
+    competitorIds: number[];
+    sportId: number;
+    catId: number;
+    champId: number;
+    status: number;
+    startDate: string;
+    id: number;
+    name: string;
+    liveTime?: string;
+}
+export interface Sport {
+    catIds: number[];
+    typeId: number;
+    iconName: string;
+    hasLiveEvents: boolean;
+    id: number;
+    name: string;
+}
+export interface Category {
+    champIds: number[];
+    iso?: string;
+    hasLiveEvents: boolean;
+    id: number;
+    name: string;
+}
+export interface Competitor {
+    id: number;
+    name: string;
+}
+export interface Championship {
+    offers?: {
+        type: number;
+    }[];
+    hasLiveEvents: boolean;
+    id: number;
+    name: string;
+    category: Category;
+    sport: Sport;
+}
+export interface Market {
+    oddIds: number[];
+    typeId: number;
+    isMB: boolean;
+    sportMarketId: number;
+    id: number;
+    name: string;
+}
+export interface WidgetInfo {
+    widget: number;
+    page: number;
+    tabIndex: number | null;
+    tipsterId: number | null;
+}
+export interface StakeAdjustment {
+    type: number;
+    value: number;
+}
+export interface FullCoverData {
+    type: number;
+    label: string | null;
+}

package/dist/stories.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";.App{padding:1rem}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;font-family:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{line-height:1;width:100%;height:100%;font-family:Rubik}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}._ProfileStories_1akh2_1{display:flex;padding:1rem;gap:.75rem;justify-items:center;overflow:auto}._ScrollMenu_1akh2_9{position:relative}._scrollContainerClassName_1akh2_13{padding:16px 14px 14px;scrollbar-width:none;-ms-overflow-style:none}._scrollContainerClassName_1akh2_13::-webkit-scrollbar{display:none}._itemClassName_1akh2_22{padding-right:10px}._itemClassName_1akh2_22:last-child{padding-right:0}._ProfileStory_1ug8f_1{display:flex;flex-direction:column;width:var(--story-width);cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}._ProfileStoryWrap_1ug8f_11{border:2px solid var(--story-color);box-shadow:0 0 3px var(--story-color),0 0 10px var(--story-color);aspect-ratio:1;border-radius:50%;position:relative;padding:2px}._ProfileStory__wrapImage_1ug8f_20{width:100%;height:100%;border-radius:50%;background:linear-gradient(to top,#535353,#d5d5d5,transparent)}._ProfileStory__image_1ug8f_27{position:absolute;height:auto;width:100%;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center}._ProfileStory__image_1ug8f_27>img{position:absolute;bottom:0;height:125%;width:auto;object-fit:cover;-webkit-user-drag:none}._ProfileStory__title_1ug8f_44{color:#222;font-size:calc(calc((var(--story-width) / 60) * 10));width:100%;text-align:center;margin:auto;margin-top:.5rem}.react-horizontal-scrolling-menu--scroll-container{display:flex;height:max-content;overflow-y:hidden;position:relative;width:100%}.react-horizontal-scrolling-menu--scroll-container.rtl{direction:rtl}.react-horizontal-scrolling-menu--inner-wrapper{display:flex;overflow-y:hidden}.react-horizontal-scrolling-menu--wrapper{display:flex;flex-direction:column}.react-horizontal-scrolling-menu--footer,.react-horizontal-scrolling-menu--header{width:100%}.react-horizontal-scrolling-menu--arrow-left,.react-horizontal-scrolling-menu--arrow-right{display:flex}.Actions-styles_left__eky50{left:0}.Actions-styles_left__eky50,.Actions-styles_right__zguoH{bottom:0;height:100%;position:absolute;top:0;width:50%;z-index:1}.Actions-styles_right__zguoH{right:0}.ProgressBar-styles_wrapper__oqUCo{background-color:#6a6a6a;border-radius:2px;height:2px;position:relative}.ProgressBar-styles_bar__x0O50{background-color:#eae8e8;border-radius:2px;bottom:0;height:2px;left:0;position:absolute;right:0;top:0;width:0}.progress-styles_wrapper__qQPyW{grid-gap:4px;display:grid;height:2px;left:0;padding:4px;position:absolute;right:0;top:0}.Story-styles_wrapper__oJP7j{align-content:center;align-items:center;display:flex;height:100%;width:100%}.Story-styles_header__-rnWL{left:0;position:absolute;right:0;top:12px}.Image-styles_image__gnfW1{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.Video-styles_video__BykuO{max-height:100%;max-width:100%;-o-object-fit:cover;object-fit:cover;width:100%}.Video-styles_loaderWrapper__TqVWk{align-content:center;align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.Video-styles_loader__FxxSV{animation:Video-styles_spin__ilbIB 1s linear infinite;border:4px solid #f3f3f3;border-radius:50%;border-top-color:#a5b0b7;height:40px;width:40px}.Video-styles_soundIcon__ZvYXE{background:transparent;border:none;cursor:pointer;outline:none;padding:16px;position:absolute;right:0;top:0;z-index:2}@keyframes Video-styles_spin__ilbIB{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.CustomComponents-styles_component__w87Wx{height:100%;width:100%}.SeeMore-styles_seeMoreWrapper__kwjif{background-color:inherit;border:none;bottom:24px;cursor:pointer;display:flex;justify-content:center;left:0;outline:none;position:absolute;right:0;width:100%;z-index:2}.SeeMore-styles_defaultSeeMore__-B1QW{align-items:center;color:#fff;display:flex;flex-direction:column;font-size:14px;font-weight:600;justify-content:center;line-height:.8;width:100%}.SeeMore-styles_defaultSeeMore__-B1QW p{margin:0;padding:0}.SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap{animation:SeeMoreComponent-styles_up__sRaEA .2s ease-in-out;animation-fill-mode:forwards;background-color:#fff;bottom:0;left:0;max-height:100%;overflow-y:auto;position:absolute;right:0;top:0;z-index:3}.SeeMoreComponent-styles_closeIcon__LMm3b{background-color:inherit;background:transparent;border:none;cursor:pointer;font-size:16px;outline:none;padding:16px;position:absolute;right:0;top:0}@keyframes SeeMoreComponent-styles_up__sRaEA{0%{transform:translateY(10%)}to{transform:translateY(0)}}.styles_main__-0FEu{-webkit-touch-callout:none;background-color:#000;position:relative;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none}._StoryPlayer_1720k_1{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;z-index:1000}._Overlay_1720k_13{background:#000000d9;height:100%;width:100%;position:absolute;left:0;top:0;cursor:pointer}._StoryPlayer__Wrap_1720k_23{position:relative;width:100%;height:100%}@media screen and (min-width: 600px){._StoryPlayer__Wrap_1720k_23{height:90dvh;height:90vh;width:initial;aspect-ratio:9 / 16}}._progressContainer_1720k_35{z-index:2}._StoryPlayer_1720k_1._inline_1720k_40{position:relative;width:100%;height:auto;max-width:350px;aspect-ratio:9 / 16}._StoryPlayer_1720k_1._inline_1720k_40 ._Overlay_1720k_13{display:none}@media screen and (min-width: 600px){._StoryPlayer_1720k_1._inline_1720k_40 ._StoryPlayer__Wrap_1720k_23{height:100%;width:100%;aspect-ratio:initial}}._story_ds79x_1{height:100%;width:100%;position:relative}._story_ds79x_1>img{width:100%;height:100%;object-fit:cover}._Button_ds79x_12{position:absolute;bottom:1rem;width:60%;left:20%;padding:.7rem;background:#fb3333;border:0;outline:0;color:#fff;font-weight:500;font-size:1rem;transform:skew(-10deg);z-index:2;cursor:pointer}._StoryHeaderPlayer_1hpyb_1{padding:5px 10px;display:flex;align-items:center;gap:.5rem;position:relative}._StoryHeaderPlayer_1hpyb_1:before{content:"";position:absolute;height:200%;width:100%;background:linear-gradient(to top,transparent,#000);left:0}._StoryHeaderPlayer__ProfileStory_1hpyb_18{width:30px;height:30px;z-index:2}._StoryHeaderPlayer__title_1hpyb_24{color:#fff;font-size:13px;font-weight:500;z-index:2}

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@maycolem/stories",
+  "version": "1.0.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@types/node": "^22.15.29",
+    "@types/react": "^17.0.87",
+    "@types/react-dom": "^17.0.26",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^9.8.0",
+    "classnames": "^2.5.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-horizontal-scrolling-menu": "^7.1.1",
+    "react-insta-stories": "^2.8.0",
+    "stories-react": "^1.1.2"
+  }
+}