react-spring-carousel 3.0.0-beta090.51 → 3.0.0-beta090.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/.storybook/main.ts +17 -0
  2. package/.storybook/preview.ts +15 -0
  3. package/README.md +50 -0
  4. package/eslint.config.js +28 -0
  5. package/index.html +13 -0
  6. package/lib/events.ts +39 -0
  7. package/lib/index.tsx +980 -0
  8. package/lib/types.ts +44 -0
  9. package/lib/useEventsModule.ts +51 -0
  10. package/lib/utils.ts +42 -0
  11. package/lib/vite-env.d.ts +1 -0
  12. package/package.json +36 -84
  13. package/src/stories/Button.stories.ts +52 -0
  14. package/src/stories/Button.tsx +48 -0
  15. package/src/stories/Configure.mdx +364 -0
  16. package/src/stories/Main.stories.ts +14 -0
  17. package/src/stories/Main.tsx +87 -0
  18. package/src/stories/assets/accessibility.png +0 -0
  19. package/src/stories/assets/accessibility.svg +1 -0
  20. package/src/stories/assets/addon-library.png +0 -0
  21. package/src/stories/assets/assets.png +0 -0
  22. package/src/stories/assets/avif-test-image.avif +0 -0
  23. package/src/stories/assets/context.png +0 -0
  24. package/src/stories/assets/discord.svg +1 -0
  25. package/src/stories/assets/docs.png +0 -0
  26. package/src/stories/assets/figma-plugin.png +0 -0
  27. package/src/stories/assets/github.svg +1 -0
  28. package/src/stories/assets/share.png +0 -0
  29. package/src/stories/assets/styling.png +0 -0
  30. package/src/stories/assets/testing.png +0 -0
  31. package/src/stories/assets/theming.png +0 -0
  32. package/src/stories/assets/tutorials.svg +1 -0
  33. package/src/stories/assets/youtube.svg +1 -0
  34. package/src/stories/button.css +30 -0
  35. package/src/stories/main.css +37 -0
  36. package/src/storybook.global.styles.css +5 -0
  37. package/tsconfig.app.json +24 -0
  38. package/tsconfig.json +7 -0
  39. package/tsconfig.node.json +22 -0
  40. package/vite.config.ts +30 -0
  41. package/dist/index.cjs.js +0 -28
  42. package/dist/index.cjs.js.map +0 -1
  43. package/dist/index.es.js +0 -1728
  44. package/dist/index.es.js.map +0 -1
  45. package/dist/types/index.d.ts +0 -3
  46. package/dist/types/modules/index.d.ts +0 -1
  47. package/dist/types/modules/useEventsModule.d.ts +0 -5
  48. package/dist/types/modules/useFullscreenModule.d.ts +0 -6
  49. package/dist/types/modules/useThumbsModule.d.ts +0 -6
  50. package/dist/types/types/common.d.ts +0 -36
  51. package/dist/types/types/index.d.ts +0 -4
  52. package/dist/types/types/useEventsModule.types.d.ts +0 -46
  53. package/dist/types/types/useFullscreenModule.types.d.ts +0 -6
  54. package/dist/types/types/useSpringCarousel.types.d.ts +0 -130
  55. package/dist/types/types/useThumbsModule.types.d.ts +0 -9
  56. package/dist/types/types/useTransitionCarousel.types.d.ts +0 -37
  57. package/dist/types/useSpringCarousel.d.ts +0 -12
  58. package/dist/types/useTransitionCarousel.d.ts +0 -5
@@ -1,130 +0,0 @@
1
- import { ReactNode } from 'react';
2
- import { ItemWithNoThumb, ItemWithThumb, PrepareThumbsData } from '../types';
3
- import { UseListenToCustomEvent } from './useEventsModule.types';
4
- export type UseSpringReturnType = {
5
- carouselFragment: ReactNode;
6
- thumbsFragment: ReactNode;
7
- useListenToCustomEvent: UseListenToCustomEvent<'use-spring'>['useListenToCustomEvent'];
8
- getIsFullscreen(): boolean;
9
- enterFullscreen(ref?: HTMLElement): void;
10
- exitFullscreen(): void;
11
- slideToNextItem(animate?: boolean): void;
12
- slideToPrevItem(animate?: boolean): void;
13
- slideToItem(item: string | number, animate?: boolean): void;
14
- getIsActiveItem(id: string): boolean;
15
- getIsNextItem(id: string | number): boolean;
16
- getIsPrevItem(id: string | number): boolean;
17
- };
18
- export type UseSpringFreeScrollReturnType = {
19
- carouselFragment: ReactNode;
20
- thumbsFragment: ReactNode;
21
- useListenToCustomEvent: UseListenToCustomEvent<'use-spring'>['useListenToCustomEvent'];
22
- getIsFullscreen(): boolean;
23
- enterFullscreen(ref?: HTMLElement): void;
24
- exitFullscreen(): void;
25
- slideToNextItem(animate?: boolean): void;
26
- slideToPrevItem(animate?: boolean): void;
27
- };
28
- declare const NSlideType: readonly ["fixed", "fluid"];
29
- export type SlideType = (typeof NSlideType)[number];
30
- export type SlideAxis = 'x' | 'y';
31
- export type StartingPosition = 'start' | 'center' | 'end';
32
- export type BaseProps = {
33
- init?: boolean;
34
- gutter?: number;
35
- carouselSlideAxis?: 'x' | 'y';
36
- draggingSlideTreshold?: number;
37
- disableGestures?: boolean;
38
- startEndGutter?: number;
39
- animateWhenActiveItemChange?: boolean;
40
- slideWhenThresholdIsReached?: boolean;
41
- };
42
- type Fixed = {
43
- slideType: (typeof NSlideType)[0];
44
- itemsPerSlide?: number;
45
- slideGroupOfItems?: boolean;
46
- startEndGutter?: number;
47
- /** For testint purposes */
48
- __unstable_stretch_tems__?: boolean;
49
- initialActiveItem?: number;
50
- /** @deprecated Must be used with slideType: fluid and freeScroll: true */
51
- enableFreeScrollDrag?: never;
52
- /** @deprecated Musts be used with slideType: fluid */
53
- freeScroll?: never;
54
- /** @deprecated Musts be used with slideType: fluid */
55
- slideAmount?: never;
56
- };
57
- type WithThumbs = {
58
- withThumbs?: true | undefined;
59
- items: ItemWithThumb<'use-spring'>[];
60
- thumbsSlideAxis?: SlideAxis;
61
- prepareThumbsData?: PrepareThumbsData<'use-spring'>;
62
- };
63
- type WithNoThumbs = {
64
- withThumbs?: false | undefined;
65
- items: ItemWithNoThumb<'use-spring'>[];
66
- /** @deprecated Must be used with withThumbs: true */
67
- thumbsSlideAxis?: never | undefined;
68
- /** @deprecated Must be used with withThumbs: true */
69
- prepareThumbsData?: never | undefined;
70
- };
71
- type Thumbs = WithThumbs | WithNoThumbs;
72
- type Common = BaseProps & Thumbs;
73
- export type FixedWithLoop = Common & Fixed & {
74
- withLoop: true;
75
- initialStartingPosition?: StartingPosition;
76
- };
77
- export type FixedWithNoLoop = Common & Fixed & {
78
- withLoop?: false;
79
- /** @deprecated Must be used with withLoop: true */
80
- initialStartingPosition?: never;
81
- };
82
- export type FluidWithFreeScroll = Common & {
83
- slideType?: (typeof NSlideType)[1];
84
- freeScroll: true;
85
- slideAmount?: number;
86
- enableFreeScrollDrag?: boolean;
87
- /** @derecated Must be used with slideType: fixed */
88
- slideGroupOfItems?: never;
89
- /** @deprecated Must be used with slideType: fixed */
90
- itemsPerSlide?: number;
91
- /** @deprecated Can't be used with freeScroll: true */
92
- withLoop?: never;
93
- /** @deprecated Can't be used with slideType: fluid */
94
- initialActiveItem?: never;
95
- /** @deprecated Should be used with slideType: fixed and withLoop: true */
96
- initialStartingPosition?: never;
97
- __unstable_stretch_tems__?: never;
98
- };
99
- export type FluidWithNoFreeScroll = Common & {
100
- slideType?: (typeof NSlideType)[1];
101
- __unstable_stretch_tems__?: never;
102
- withLoop?: boolean;
103
- freeScroll?: false;
104
- enableFreeScrollDrag?: never;
105
- /** @derecated Must be used with slideType: fixed */
106
- slideGroupOfItems?: never;
107
- /** @deprecated Must be used with slideType: fixed */
108
- itemsPerSlide?: number;
109
- /** @deprecated Can't be used with slideType: fluid */
110
- initialActiveItem?: never;
111
- /** @deprecated Should be used with slideType: fixed and withLoop: true */
112
- initialStartingPosition?: never;
113
- slideAmount?: never;
114
- };
115
- export type Complete = FixedWithLoop | FixedWithNoLoop | FluidWithFreeScroll | FluidWithNoFreeScroll;
116
- export type Total = Common & {
117
- slideType?: SlideType;
118
- withLoop?: boolean;
119
- freeScroll?: boolean;
120
- slideAmount?: number;
121
- itemsPerSlide?: number;
122
- slideGroupOfItems?: boolean;
123
- startEndGutter?: number;
124
- initialActiveItem?: number;
125
- initialStartingPosition?: StartingPosition;
126
- enableFreeScrollDrag?: boolean;
127
- thumbsSlideAxis?: SlideAxis;
128
- __unstable_stretch_tems__?: boolean;
129
- };
130
- export {};
@@ -1,9 +0,0 @@
1
- import { ItemWithThumb, PrepareThumbsData, RenderItemProps } from '../types';
2
- import { SlideAxis } from './useSpringCarousel.types';
3
- export type UseThumbsModule<T extends 'use-spring' | 'use-transition'> = {
4
- withThumbs?: boolean;
5
- thumbsSlideAxis: SlideAxis;
6
- prepareThumbsData?: PrepareThumbsData<T>;
7
- items: ItemWithThumb<T>[];
8
- renderThumbFnProps: RenderItemProps<T>;
9
- };
@@ -1,37 +0,0 @@
1
- import { SpringConfig, TransitionFrom, TransitionTo } from '@react-spring/web';
2
- import { ReactNode } from 'react';
3
- import { ItemWithNoThumb, ItemWithThumb } from '../types';
4
- import { UseListenToCustomEvent } from './useEventsModule.types';
5
- type Item = ItemWithThumb<'use-transition'> | ItemWithNoThumb<'use-transition'>;
6
- export type SpringAnimationProps = {
7
- initial: TransitionFrom<Item>;
8
- from: TransitionFrom<Item>;
9
- enter: TransitionTo<Item>;
10
- leave: TransitionTo<Item>;
11
- };
12
- type BaseProps = {
13
- init?: boolean;
14
- disableGestures?: boolean;
15
- springConfig?: Omit<SpringConfig, 'velocity'>;
16
- toPrevItemSpringProps?: SpringAnimationProps;
17
- toNextItemSpringProps?: SpringAnimationProps;
18
- exitBeforeEnter?: boolean;
19
- trail?: number;
20
- withLoop?: boolean;
21
- draggingSlideTreshold?: number;
22
- thumbsSlideAxis?: 'x' | 'y';
23
- activeItem?: number;
24
- };
25
- export type UseTransitionCarouselProps = BaseProps & {
26
- items: ItemWithNoThumb<'use-transition'>[] | ItemWithThumb<'use-transition'>[];
27
- };
28
- export type UseTransitionCarouselReturnProps = {
29
- useListenToCustomEvent: UseListenToCustomEvent<'use-transition'>['useListenToCustomEvent'];
30
- carouselFragment: ReactNode;
31
- thumbsFragment: ReactNode;
32
- activeItem: number;
33
- slideToPrevItem(): void;
34
- slideToNextItem(): void;
35
- slideToItem(index: number): void;
36
- };
37
- export {};
@@ -1,12 +0,0 @@
1
- import { UseSpringFreeScrollReturnType, UseSpringReturnType } from './types';
2
- import { Complete, FixedWithLoop, FixedWithNoLoop, FluidWithFreeScroll, FluidWithNoFreeScroll } from './types/useSpringCarousel.types';
3
- type ReturnType<T> = T extends true ? UseSpringFreeScrollReturnType : UseSpringReturnType;
4
- declare function useSpringCarousel(props: FixedWithLoop): ReturnType<false>;
5
- declare function useSpringCarousel(props: FixedWithNoLoop): ReturnType<false>;
6
- declare function useSpringCarousel(props: FluidWithFreeScroll): ReturnType<true>;
7
- declare function useSpringCarousel(props: FluidWithNoFreeScroll): ReturnType<false>;
8
- declare function useSpringCarousel(props: Complete): ReturnType<true>;
9
- declare function useSpringCarousel(props: Complete): ReturnType<false>;
10
- type ContextProps<T = undefined> = Omit<ReturnType<T extends 'free-scroll' ? true : false>, 'carouselFragment' | 'thumbsFragment'>;
11
- declare function useSpringCarouselContext<T>(): ContextProps<T>;
12
- export { useSpringCarousel, useSpringCarouselContext };
@@ -1,5 +0,0 @@
1
- import { UseTransitionCarouselProps, UseTransitionCarouselReturnProps } from './types';
2
- declare function useTransitionCarousel({ init, disableGestures, items, springConfig, exitBeforeEnter, trail, withLoop, activeItem: externalActiveItem, toPrevItemSpringProps, toNextItemSpringProps, draggingSlideTreshold, thumbsSlideAxis, }: UseTransitionCarouselProps): UseTransitionCarouselReturnProps;
3
- type ContextProps = Omit<UseTransitionCarouselReturnProps, 'carouselFragment' | 'thumbsFragment'>;
4
- declare function useTransitionCarouselContext(): ContextProps;
5
- export { useTransitionCarousel, useTransitionCarouselContext };