@repere/react 0.0.0
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.
- package/dist/components/Beacons.d.ts +12 -0
- package/dist/components/Beacons.d.ts.map +1 -0
- package/dist/components/Popover/Popover.d.ts +15 -0
- package/dist/components/Popover/Popover.d.ts.map +1 -0
- package/dist/components/Popover/PopoverAcknowledgeButton.d.ts +15 -0
- package/dist/components/Popover/PopoverAcknowledgeButton.d.ts.map +1 -0
- package/dist/components/Popover/PopoverCloseButton.d.ts +7 -0
- package/dist/components/Popover/PopoverCloseButton.d.ts.map +1 -0
- package/dist/components/Popover/PopoverContent.d.ts +7 -0
- package/dist/components/Popover/PopoverContent.d.ts.map +1 -0
- package/dist/components/Popover/PopoverFooter.d.ts +7 -0
- package/dist/components/Popover/PopoverFooter.d.ts.map +1 -0
- package/dist/components/Popover/PopoverTitle.d.ts +14 -0
- package/dist/components/Popover/PopoverTitle.d.ts.map +1 -0
- package/dist/components/Popover/index.d.ts +16 -0
- package/dist/components/Popover/index.d.ts.map +1 -0
- package/dist/components/RepereProvider.d.ts +12 -0
- package/dist/components/RepereProvider.d.ts.map +1 -0
- package/dist/components/RepereTrigger.d.ts +17 -0
- package/dist/components/RepereTrigger.d.ts.map +1 -0
- package/dist/context/RepereContext.d.ts +22 -0
- package/dist/context/RepereContext.d.ts.map +1 -0
- package/dist/hooks/useAnimationConfigs.d.ts +9 -0
- package/dist/hooks/useAnimationConfigs.d.ts.map +1 -0
- package/dist/hooks/useBeaconPosition.d.ts +15 -0
- package/dist/hooks/useBeaconPosition.d.ts.map +1 -0
- package/dist/hooks/usePopoverState.d.ts +9 -0
- package/dist/hooks/usePopoverState.d.ts.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +444 -0
- package/dist/types.d.ts +38 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/utils/renderRepereComponents.d.ts +19 -0
- package/dist/utils/renderRepereComponents.d.ts.map +1 -0
- package/dist/utils/resolveBeaconConfig.d.ts +10 -0
- package/dist/utils/resolveBeaconConfig.d.ts.map +1 -0
- package/package.json +59 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { RepereReactConfig } from '../types';
|
|
2
|
+
export interface BeaconsProps {
|
|
3
|
+
config: RepereReactConfig;
|
|
4
|
+
/**
|
|
5
|
+
* Current pathname from your router
|
|
6
|
+
*/
|
|
7
|
+
currentPath: string;
|
|
8
|
+
enabled?: boolean;
|
|
9
|
+
debug?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare function Beacons({ config, currentPath, enabled, debug, }: BeaconsProps): import('react').ReactPortal | null;
|
|
12
|
+
//# sourceMappingURL=Beacons.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Beacons.d.ts","sourceRoot":"","sources":["../../src/components/Beacons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA+B,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG/E,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,iBAAiB,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,WAAW,EACX,OAAc,EACd,KAAa,GACd,EAAE,YAAY,sCAkEd"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Beacon, Position } from '@repere/core';
|
|
2
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
style?: React.CSSProperties;
|
|
6
|
+
popover?: "auto" | "manual" | "hint" | "";
|
|
7
|
+
disableAnimation?: boolean;
|
|
8
|
+
beacon?: Beacon;
|
|
9
|
+
position?: Position;
|
|
10
|
+
onDismiss?: () => void;
|
|
11
|
+
onClose?: () => void;
|
|
12
|
+
}
|
|
13
|
+
declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
14
|
+
export default Popover;
|
|
15
|
+
//# sourceMappingURL=Popover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACrD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,EAAE,CAAC;IAC1C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,yGAkEZ,CAAC;AAGF,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
|
|
2
|
+
type PolymorphicRef<C extends ElementType> = ComponentPropsWithoutRef<C>["ref"];
|
|
3
|
+
type PopoverAcknowledgeButtonOwnProps<C extends ElementType = ElementType> = {
|
|
4
|
+
as?: C;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
};
|
|
7
|
+
export type PopoverAcknowledgeButtonProps<C extends ElementType = "button"> = PopoverAcknowledgeButtonOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof PopoverAcknowledgeButtonOwnProps<C>>;
|
|
8
|
+
type PopoverAcknowledgeButtonComponent = <C extends ElementType = "button">(props: PopoverAcknowledgeButtonProps<C> & {
|
|
9
|
+
ref?: PolymorphicRef<C>;
|
|
10
|
+
}) => React.ReactElement | null;
|
|
11
|
+
declare const PopoverAcknowledgeButton: PopoverAcknowledgeButtonComponent & {
|
|
12
|
+
displayName: string;
|
|
13
|
+
};
|
|
14
|
+
export default PopoverAcknowledgeButton;
|
|
15
|
+
//# sourceMappingURL=PopoverAcknowledgeButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverAcknowledgeButton.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverAcknowledgeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,KAAK,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,wBAAwB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAEhF,KAAK,gCAAgC,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC3E,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IACxE,gCAAgC,CAAC,CAAC,CAAC,GACjC,IAAI,CACF,wBAAwB,CAAC,CAAC,CAAC,EAC3B,MAAM,gCAAgC,CAAC,CAAC,CAAC,CAC1C,CAAC;AAEN,KAAK,iCAAiC,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EACxE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;CAAE,KAClE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAqC/B,QAAA,MAAM,wBAAwB;;CAE5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface PopoverCloseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
}
|
|
5
|
+
declare const PopoverCloseButton: import('react').ForwardRefExoticComponent<PopoverCloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
export default PopoverCloseButton;
|
|
7
|
+
//# sourceMappingURL=PopoverCloseButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverCloseButton.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,WAAW,uBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,uHAkBtB,CAAC;AAEH,eAAe,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
}
|
|
5
|
+
declare const PopoverContent: import('react').ForwardRefExoticComponent<PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export default PopoverContent;
|
|
7
|
+
//# sourceMappingURL=PopoverContent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverContent.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,gHAQnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface PopoverFooterProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
}
|
|
5
|
+
declare const PopoverFooter: import('react').ForwardRefExoticComponent<PopoverFooterProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export default PopoverFooter;
|
|
7
|
+
//# sourceMappingURL=PopoverFooter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,+GAQlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
|
|
2
|
+
type PolymorphicRef<C extends ElementType> = ComponentPropsWithoutRef<C>["ref"];
|
|
3
|
+
export interface PopoverTitleProps<T extends ElementType = "h3"> {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
as?: T;
|
|
6
|
+
}
|
|
7
|
+
type PopoverTitleComponent = <C extends ElementType = "h3">(props: PopoverTitleProps<C> & {
|
|
8
|
+
ref?: PolymorphicRef<C>;
|
|
9
|
+
}) => React.ReactElement | null;
|
|
10
|
+
declare const PopoverTitle: PopoverTitleComponent & {
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
13
|
+
export default PopoverTitle;
|
|
14
|
+
//# sourceMappingURL=PopoverTitle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverTitle.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,KAAK,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,wBAAwB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAEhF,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,IAAI;IAC7D,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,CAAC,CAAC;CACR;AAED,KAAK,qBAAqB,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,IAAI,EACxD,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;CAAE,KACtD,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAoB/B,QAAA,MAAM,YAAY;;CAEhB,CAAC;AAEH,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const ReperePopover: import('react').ForwardRefExoticComponent<import('./Popover').PopoverProps & import('react').RefAttributes<HTMLDivElement>> & {
|
|
2
|
+
Title: (<C extends import('react').ElementType = "h3">(props: import('./PopoverTitle').PopoverTitleProps<C> & {
|
|
3
|
+
ref?: import('react').PropsWithoutRef<import('react').ComponentProps<C>>["ref"];
|
|
4
|
+
}) => React.ReactElement | null) & {
|
|
5
|
+
displayName: string;
|
|
6
|
+
};
|
|
7
|
+
Content: import('react').ForwardRefExoticComponent<import('./PopoverContent').PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
8
|
+
Footer: import('react').ForwardRefExoticComponent<import('./PopoverFooter').PopoverFooterProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
9
|
+
AcknowledgeButton: (<C extends import('react').ElementType = "button">(props: import('./PopoverAcknowledgeButton').PopoverAcknowledgeButtonProps<C> & {
|
|
10
|
+
ref?: import('react').PropsWithoutRef<import('react').ComponentProps<C>>["ref"];
|
|
11
|
+
}) => React.ReactElement | null) & {
|
|
12
|
+
displayName: string;
|
|
13
|
+
};
|
|
14
|
+
CloseButton: import('react').ForwardRefExoticComponent<import('./PopoverCloseButton').PopoverCloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa;;WAIY,CAAC;;;;;;;WAG8K,CAAC;;;;;CADpN,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BeaconStore } from '@repere/core';
|
|
2
|
+
import { ReactBeacon, RepereReactConfig } from '../types';
|
|
3
|
+
interface RepereProviderProps {
|
|
4
|
+
beacon: ReactBeacon;
|
|
5
|
+
config: RepereReactConfig;
|
|
6
|
+
store: BeaconStore;
|
|
7
|
+
onDismiss: () => void;
|
|
8
|
+
debug?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare function RepereProvider({ beacon, config, store, onDismiss, debug, }: RepereProviderProps): import("react/jsx-runtime").JSX.Element | null;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=RepereProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RepereProvider.d.ts","sourceRoot":"","sources":["../../src/components/RepereProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhD,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAO/D,UAAU,mBAAmB;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,kDAkHrB"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
|
|
2
|
+
type PolymorphicRef<C extends ElementType> = ComponentPropsWithoutRef<C>["ref"];
|
|
3
|
+
type RepereTriggerOwnProps<C extends ElementType = ElementType> = {
|
|
4
|
+
as?: C;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
style?: CSSProperties;
|
|
7
|
+
disableAnimation?: boolean;
|
|
8
|
+
};
|
|
9
|
+
export type RepereTriggerProps<C extends ElementType = "button"> = RepereTriggerOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof RepereTriggerOwnProps<C> | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration">;
|
|
10
|
+
type RepereTriggerComponent = <C extends ElementType = "button">(props: RepereTriggerProps<C> & {
|
|
11
|
+
ref?: PolymorphicRef<C>;
|
|
12
|
+
}) => ReactElement | null;
|
|
13
|
+
declare const RepereTrigger: RepereTriggerComponent & {
|
|
14
|
+
displayName: string;
|
|
15
|
+
};
|
|
16
|
+
export { RepereTrigger };
|
|
17
|
+
//# sourceMappingURL=RepereTrigger.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RepereTrigger.d.ts","sourceRoot":"","sources":["../../src/components/RepereTrigger.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,aAAa,EAClB,KAAK,WAAW,EAEhB,KAAK,YAAY,EACjB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAGf,KAAK,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,wBAAwB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAEhF,KAAK,qBAAqB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAChE,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAC7D,qBAAqB,CAAC,CAAC,CAAC,GACtB,IAAI,CACF,wBAAwB,CAAC,CAAC,CAAC,EACzB,MAAM,qBAAqB,CAAC,CAAC,CAAC,GAC9B,QAAQ,GACR,aAAa,GACb,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,CACzB,CAAC;AAEN,KAAK,sBAAsB,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAC7D,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;CAAE,KACvD,YAAY,GAAG,IAAI,CAAC;AAsGzB,QAAA,MAAM,aAAa;;CAEjB,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { CalculatedBeaconPosition, Offset, Position, ResolvedAnimationConfig } from '@repere/core';
|
|
2
|
+
export interface RepereContextValue {
|
|
3
|
+
beaconId: string;
|
|
4
|
+
position: Position;
|
|
5
|
+
popoverPosition?: Position;
|
|
6
|
+
popoverOffset?: Offset;
|
|
7
|
+
calculatedPosition: CalculatedBeaconPosition | null;
|
|
8
|
+
isOpen: boolean;
|
|
9
|
+
isDismissing: boolean;
|
|
10
|
+
toggle: () => void;
|
|
11
|
+
open: () => void;
|
|
12
|
+
close: () => void;
|
|
13
|
+
dismiss: () => void;
|
|
14
|
+
triggerAnimation: ResolvedAnimationConfig | null;
|
|
15
|
+
triggerDismissAnimation: ResolvedAnimationConfig | null;
|
|
16
|
+
popoverOpenAnimation: ResolvedAnimationConfig | null;
|
|
17
|
+
popoverCloseAnimation: ResolvedAnimationConfig | null;
|
|
18
|
+
popoverId?: string;
|
|
19
|
+
}
|
|
20
|
+
export declare const RepereContext: import('react').Context<RepereContextValue | null>;
|
|
21
|
+
export declare function useRepereContext(): RepereContextValue;
|
|
22
|
+
//# sourceMappingURL=RepereContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RepereContext.d.ts","sourceRoot":"","sources":["../../src/context/RepereContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,MAAM,EACN,QAAQ,EACR,uBAAuB,EACxB,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,wBAAwB,GAAG,IAAI,CAAC;IACpD,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACjD,uBAAuB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACxD,oBAAoB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACrD,qBAAqB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAE5E,wBAAgB,gBAAgB,IAAI,kBAAkB,CAMrD"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Beacon } from '@repere/core';
|
|
2
|
+
import { RepereReactConfig } from '../types';
|
|
3
|
+
export declare function useAnimationConfigs(beacon: Beacon, config: RepereReactConfig): {
|
|
4
|
+
triggerAnimation: import('@repere/core').ResolvedAnimationConfig | null;
|
|
5
|
+
triggerDismissAnimation: import('@repere/core').ResolvedAnimationConfig | null;
|
|
6
|
+
popoverOpenAnimation: import('@repere/core').ResolvedAnimationConfig | null;
|
|
7
|
+
popoverCloseAnimation: import('@repere/core').ResolvedAnimationConfig | null;
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=useAnimationConfigs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAnimationConfigs.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnimationConfigs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB;;;;;EAqC5E"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { CalculatedBeaconPosition, Offset, Position } from '@repere/core';
|
|
2
|
+
interface UseBeaconPositionParams {
|
|
3
|
+
targetSelector: string;
|
|
4
|
+
position: Position;
|
|
5
|
+
offset?: Offset;
|
|
6
|
+
zIndex?: number;
|
|
7
|
+
enabled?: boolean;
|
|
8
|
+
debug?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare function useBeaconPosition({ targetSelector, position, offset, zIndex, enabled, debug, }: UseBeaconPositionParams): {
|
|
11
|
+
calculatedPosition: CalculatedBeaconPosition | null;
|
|
12
|
+
targetElement: HTMLElement | null;
|
|
13
|
+
};
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=useBeaconPosition.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBeaconPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useBeaconPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI/E,UAAU,uBAAuB;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,QAAQ,EACR,MAAM,EACN,MAAa,EACb,OAAc,EACd,KAAa,GACd,EAAE,uBAAuB;;;EAkCzB"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare function usePopoverState(): {
|
|
2
|
+
isOpen: boolean;
|
|
3
|
+
popoverElement: HTMLDivElement | null;
|
|
4
|
+
handlePopoverRef: (node: HTMLDivElement | null) => void;
|
|
5
|
+
togglePopover: () => boolean | undefined;
|
|
6
|
+
showPopover: () => void | undefined;
|
|
7
|
+
hidePopover: () => void | undefined;
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=usePopoverState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePopoverState.d.ts","sourceRoot":"","sources":["../../src/hooks/usePopoverState.ts"],"names":[],"mappings":"AAGA,wBAAgB,eAAe;;;6BAMe,cAAc,GAAG,IAAI;;;;EAwClE"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { Beacons, type BeaconsProps } from './components/Beacons';
|
|
2
|
+
export { ReperePopover } from './components/Popover';
|
|
3
|
+
export { RepereTrigger } from './components/RepereTrigger';
|
|
4
|
+
export type { PopoverComponent, PopoverComponentProps, ReactBeacon, RepereReactConfig, TriggerComponent, TriggerComponentProps, } from './types';
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,SAAS,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,444 @@
|
|
|
1
|
+
import { jsx as w, jsxs as K } from "react/jsx-runtime";
|
|
2
|
+
import { getAnimationConfig as $, mergeAnimationConfigs as k, PositionTracker as Q, DEFAULT_POSITION as X, calculateDismissDuration as Y, waitForAnimations as Z, MemoryStore as oo, BeaconManager as eo, getPopoverAnimationStyles as no, combineTranslateWithAnimation as to } from "@repere/core";
|
|
3
|
+
import { createContext as io, useContext as ro, useMemo as O, useState as b, useEffect as E, useCallback as x, isValidElement as _, cloneElement as so, useId as ao, forwardRef as B } from "react";
|
|
4
|
+
import { createPortal as po } from "react-dom";
|
|
5
|
+
import { motion as M } from "motion/react";
|
|
6
|
+
const L = io(null);
|
|
7
|
+
function N() {
|
|
8
|
+
const o = ro(L);
|
|
9
|
+
if (!o)
|
|
10
|
+
throw new Error("useRepereContext must be used within a Repere provider.");
|
|
11
|
+
return o;
|
|
12
|
+
}
|
|
13
|
+
function co(o, e) {
|
|
14
|
+
var a, l, t, p, m, d, c, u, v, A, I, R, h, T;
|
|
15
|
+
const n = O(() => {
|
|
16
|
+
var g, C, f, P;
|
|
17
|
+
const y = (C = (g = e.trigger) == null ? void 0 : g.animations) == null ? void 0 : C.onRender, D = (P = (f = o.trigger) == null ? void 0 : f.animations) == null ? void 0 : P.onRender;
|
|
18
|
+
return $(k(y, D));
|
|
19
|
+
}, [(a = e.trigger) == null ? void 0 : a.animations, (l = o.trigger) == null ? void 0 : l.animations]), r = O(() => {
|
|
20
|
+
var g, C, f, P;
|
|
21
|
+
const y = (C = (g = e.trigger) == null ? void 0 : g.animations) == null ? void 0 : C.onDismiss, D = (P = (f = o.trigger) == null ? void 0 : f.animations) == null ? void 0 : P.onDismiss;
|
|
22
|
+
return $(k(y, D));
|
|
23
|
+
}, [
|
|
24
|
+
(p = (t = e.trigger) == null ? void 0 : t.animations) == null ? void 0 : p.onDismiss,
|
|
25
|
+
(d = (m = o.trigger) == null ? void 0 : m.animations) == null ? void 0 : d.onDismiss
|
|
26
|
+
]), i = O(() => {
|
|
27
|
+
var g, C, f, P;
|
|
28
|
+
const y = (C = (g = e.popover) == null ? void 0 : g.animations) == null ? void 0 : C.onOpen, D = (P = (f = o.popover) == null ? void 0 : f.animations) == null ? void 0 : P.onOpen;
|
|
29
|
+
return $(k(y, D));
|
|
30
|
+
}, [(u = (c = e.popover) == null ? void 0 : c.animations) == null ? void 0 : u.onOpen, (A = (v = o.popover) == null ? void 0 : v.animations) == null ? void 0 : A.onOpen]), s = O(() => {
|
|
31
|
+
var g, C, f, P;
|
|
32
|
+
const y = (C = (g = e.popover) == null ? void 0 : g.animations) == null ? void 0 : C.onClose, D = (P = (f = o.popover) == null ? void 0 : f.animations) == null ? void 0 : P.onClose;
|
|
33
|
+
return $(k(y, D));
|
|
34
|
+
}, [
|
|
35
|
+
(R = (I = e.popover) == null ? void 0 : I.animations) == null ? void 0 : R.onClose,
|
|
36
|
+
(T = (h = o.popover) == null ? void 0 : h.animations) == null ? void 0 : T.onClose
|
|
37
|
+
]);
|
|
38
|
+
return {
|
|
39
|
+
triggerAnimation: n,
|
|
40
|
+
triggerDismissAnimation: r,
|
|
41
|
+
popoverOpenAnimation: i,
|
|
42
|
+
popoverCloseAnimation: s
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
function lo({
|
|
46
|
+
targetSelector: o,
|
|
47
|
+
position: e,
|
|
48
|
+
offset: n,
|
|
49
|
+
zIndex: r = 9999,
|
|
50
|
+
enabled: i = !0,
|
|
51
|
+
debug: s = !1
|
|
52
|
+
}) {
|
|
53
|
+
const [a, l] = b(null), t = O(() => new Q(s), [s]);
|
|
54
|
+
return E(() => {
|
|
55
|
+
if (!i) {
|
|
56
|
+
l(null);
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
return t.subscribe(
|
|
60
|
+
o,
|
|
61
|
+
e,
|
|
62
|
+
l,
|
|
63
|
+
{ offset: n, zIndex: r }
|
|
64
|
+
);
|
|
65
|
+
}, [t, o, e, n, r, i]), E(() => () => t.destroy(), [t]), {
|
|
66
|
+
calculatedPosition: a,
|
|
67
|
+
targetElement: a ? document.querySelector(o) : null
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
function mo() {
|
|
71
|
+
const [o, e] = b(!1), [n, r] = b(
|
|
72
|
+
null
|
|
73
|
+
), i = x((t) => {
|
|
74
|
+
r(t);
|
|
75
|
+
}, []), s = x(
|
|
76
|
+
() => n == null ? void 0 : n.togglePopover(),
|
|
77
|
+
[n]
|
|
78
|
+
), a = x(
|
|
79
|
+
() => n == null ? void 0 : n.showPopover(),
|
|
80
|
+
[n]
|
|
81
|
+
), l = x(
|
|
82
|
+
() => n == null ? void 0 : n.hidePopover(),
|
|
83
|
+
[n]
|
|
84
|
+
);
|
|
85
|
+
return E(() => {
|
|
86
|
+
if (!n) return;
|
|
87
|
+
const t = (p) => {
|
|
88
|
+
e(p.newState === "open");
|
|
89
|
+
};
|
|
90
|
+
return n.addEventListener("toggle", t), () => n.removeEventListener("toggle", t);
|
|
91
|
+
}, [n]), {
|
|
92
|
+
isOpen: o,
|
|
93
|
+
popoverElement: n,
|
|
94
|
+
handlePopoverRef: i,
|
|
95
|
+
togglePopover: s,
|
|
96
|
+
showPopover: a,
|
|
97
|
+
hidePopover: l
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
function uo(o, e) {
|
|
101
|
+
return o ? _(o) ? o : /* @__PURE__ */ w(
|
|
102
|
+
o,
|
|
103
|
+
{
|
|
104
|
+
beacon: e.beacon,
|
|
105
|
+
style: e.calculatedPosition,
|
|
106
|
+
position: e.position,
|
|
107
|
+
isOpen: e.isOpen,
|
|
108
|
+
onClick: e.togglePopover
|
|
109
|
+
}
|
|
110
|
+
) : null;
|
|
111
|
+
}
|
|
112
|
+
function vo(o, e) {
|
|
113
|
+
let n;
|
|
114
|
+
return _(o) ? n = o : n = /* @__PURE__ */ w(
|
|
115
|
+
o,
|
|
116
|
+
{
|
|
117
|
+
beacon: e.beacon,
|
|
118
|
+
position: e.position,
|
|
119
|
+
onDismiss: e.handleDismiss,
|
|
120
|
+
onClose: e.hidePopover
|
|
121
|
+
}
|
|
122
|
+
), so(n, {
|
|
123
|
+
ref: e.handlePopoverRef,
|
|
124
|
+
id: e.popoverId,
|
|
125
|
+
popover: "auto"
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
function go(o, e) {
|
|
129
|
+
var l, t, p, m, d, c, u, v, A;
|
|
130
|
+
const n = ((l = o.trigger) == null ? void 0 : l.position) || ((t = e.trigger) == null ? void 0 : t.position) || X, r = ((p = o.trigger) == null ? void 0 : p.zIndex) || ((m = e.trigger) == null ? void 0 : m.zIndex) || 9999, i = (d = o.trigger) == null ? void 0 : d.offset, s = ((c = o.popover) == null ? void 0 : c.position) || ((u = e.popover) == null ? void 0 : u.position) || n, a = ((v = o.popover) == null ? void 0 : v.offset) || ((A = e.popover) == null ? void 0 : A.offset) || { x: 0, y: 0 };
|
|
131
|
+
return {
|
|
132
|
+
position: n,
|
|
133
|
+
zIndex: r,
|
|
134
|
+
offset: i,
|
|
135
|
+
popoverPosition: s,
|
|
136
|
+
popoverOffset: a
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
function fo({
|
|
140
|
+
beacon: o,
|
|
141
|
+
config: e,
|
|
142
|
+
store: n,
|
|
143
|
+
onDismiss: r,
|
|
144
|
+
debug: i
|
|
145
|
+
}) {
|
|
146
|
+
var S, z, F;
|
|
147
|
+
const s = ao(), [a, l] = b(!1), { position: t, zIndex: p, offset: m, popoverPosition: d, popoverOffset: c } = go(o, e), { calculatedPosition: u, targetElement: v } = lo({
|
|
148
|
+
targetSelector: o.selector,
|
|
149
|
+
position: t,
|
|
150
|
+
offset: m,
|
|
151
|
+
zIndex: p,
|
|
152
|
+
enabled: !0,
|
|
153
|
+
debug: i
|
|
154
|
+
}), {
|
|
155
|
+
isOpen: A,
|
|
156
|
+
popoverElement: I,
|
|
157
|
+
handlePopoverRef: R,
|
|
158
|
+
togglePopover: h,
|
|
159
|
+
showPopover: T,
|
|
160
|
+
hidePopover: y
|
|
161
|
+
} = mo(), {
|
|
162
|
+
triggerAnimation: D,
|
|
163
|
+
triggerDismissAnimation: g,
|
|
164
|
+
popoverOpenAnimation: C,
|
|
165
|
+
popoverCloseAnimation: f
|
|
166
|
+
} = co(o, e), P = async () => {
|
|
167
|
+
l(!0), I == null || I.hidePopover();
|
|
168
|
+
const J = Y(
|
|
169
|
+
g,
|
|
170
|
+
f
|
|
171
|
+
);
|
|
172
|
+
await Z(J), await Promise.resolve(n.dismiss(o.id)), r();
|
|
173
|
+
}, W = {
|
|
174
|
+
beaconId: o.id,
|
|
175
|
+
position: t,
|
|
176
|
+
popoverPosition: d,
|
|
177
|
+
popoverOffset: c,
|
|
178
|
+
calculatedPosition: u,
|
|
179
|
+
isOpen: A,
|
|
180
|
+
isDismissing: a,
|
|
181
|
+
toggle: h,
|
|
182
|
+
open: T,
|
|
183
|
+
close: y,
|
|
184
|
+
dismiss: P,
|
|
185
|
+
triggerAnimation: D,
|
|
186
|
+
triggerDismissAnimation: g,
|
|
187
|
+
popoverOpenAnimation: C,
|
|
188
|
+
popoverCloseAnimation: f,
|
|
189
|
+
popoverId: s
|
|
190
|
+
}, H = ((S = o.trigger) == null ? void 0 : S.component) || ((z = e.trigger) == null ? void 0 : z.component), j = o.popover.component || ((F = e.popover) == null ? void 0 : F.component);
|
|
191
|
+
return !u || !v ? (i && console.warn(
|
|
192
|
+
`[Repere] ${o.id} waiting for target element: position=${!!u}, element=${!!v}`
|
|
193
|
+
), null) : j ? /* @__PURE__ */ K(L.Provider, { value: W, children: [
|
|
194
|
+
uo(H, {
|
|
195
|
+
beacon: o,
|
|
196
|
+
calculatedPosition: u,
|
|
197
|
+
position: t,
|
|
198
|
+
isOpen: A,
|
|
199
|
+
togglePopover: h
|
|
200
|
+
}),
|
|
201
|
+
vo(j, {
|
|
202
|
+
beacon: o,
|
|
203
|
+
position: t,
|
|
204
|
+
handleDismiss: P,
|
|
205
|
+
hidePopover: y,
|
|
206
|
+
handlePopoverRef: R,
|
|
207
|
+
popoverId: s
|
|
208
|
+
})
|
|
209
|
+
] }) : (i && console.warn(
|
|
210
|
+
"[Repere] No popover component provided for beacon:",
|
|
211
|
+
o.id
|
|
212
|
+
), null);
|
|
213
|
+
}
|
|
214
|
+
function Bo({
|
|
215
|
+
config: o,
|
|
216
|
+
currentPath: e,
|
|
217
|
+
enabled: n = !0,
|
|
218
|
+
debug: r = !1
|
|
219
|
+
}) {
|
|
220
|
+
const i = O(
|
|
221
|
+
() => o.store || new oo(),
|
|
222
|
+
[o.store]
|
|
223
|
+
), s = O(
|
|
224
|
+
() => new eo(i, { debug: r }),
|
|
225
|
+
[i, r]
|
|
226
|
+
), [a, l] = b([]), [t, p] = b(
|
|
227
|
+
/* @__PURE__ */ new Set()
|
|
228
|
+
);
|
|
229
|
+
E(() => {
|
|
230
|
+
if (!n) {
|
|
231
|
+
l([]), p(/* @__PURE__ */ new Set());
|
|
232
|
+
return;
|
|
233
|
+
}
|
|
234
|
+
(async () => {
|
|
235
|
+
const u = await s.getActiveBeacons(
|
|
236
|
+
o.pages,
|
|
237
|
+
e
|
|
238
|
+
);
|
|
239
|
+
l(u);
|
|
240
|
+
})();
|
|
241
|
+
}, [s, o.pages, e, n]);
|
|
242
|
+
const m = (c) => {
|
|
243
|
+
p((u) => /* @__PURE__ */ new Set([...u, c]));
|
|
244
|
+
}, d = a.filter(
|
|
245
|
+
(c) => !t.has(c.id)
|
|
246
|
+
);
|
|
247
|
+
return d.length === 0 ? null : po(
|
|
248
|
+
d.map((c) => /* @__PURE__ */ w(
|
|
249
|
+
fo,
|
|
250
|
+
{
|
|
251
|
+
beacon: c,
|
|
252
|
+
config: o,
|
|
253
|
+
store: i,
|
|
254
|
+
debug: r,
|
|
255
|
+
onDismiss: () => m(c.id)
|
|
256
|
+
},
|
|
257
|
+
c.id
|
|
258
|
+
)),
|
|
259
|
+
document.body
|
|
260
|
+
);
|
|
261
|
+
}
|
|
262
|
+
const V = B(
|
|
263
|
+
({
|
|
264
|
+
children: o,
|
|
265
|
+
style: e,
|
|
266
|
+
popover: n = "auto",
|
|
267
|
+
disableAnimation: r,
|
|
268
|
+
// Destructure and discard internal props so they don't spread to DOM
|
|
269
|
+
beacon: i,
|
|
270
|
+
position: s,
|
|
271
|
+
onDismiss: a,
|
|
272
|
+
onClose: l,
|
|
273
|
+
...t
|
|
274
|
+
}, p) => {
|
|
275
|
+
const {
|
|
276
|
+
beaconId: m,
|
|
277
|
+
popoverOpenAnimation: d,
|
|
278
|
+
popoverCloseAnimation: c,
|
|
279
|
+
popoverPosition: u,
|
|
280
|
+
popoverOffset: v
|
|
281
|
+
} = N(), A = x(
|
|
282
|
+
(h) => {
|
|
283
|
+
typeof p == "function" ? p(h) : p && (p.current = h);
|
|
284
|
+
},
|
|
285
|
+
[p]
|
|
286
|
+
), R = {
|
|
287
|
+
positionAnchor: m ? `--repere-trigger-${m}` : void 0,
|
|
288
|
+
...v && {
|
|
289
|
+
marginLeft: v.x || 0,
|
|
290
|
+
marginTop: v.y || 0
|
|
291
|
+
},
|
|
292
|
+
...no(d, c),
|
|
293
|
+
...e
|
|
294
|
+
};
|
|
295
|
+
return /* @__PURE__ */ w(
|
|
296
|
+
"div",
|
|
297
|
+
{
|
|
298
|
+
ref: A,
|
|
299
|
+
role: "dialog",
|
|
300
|
+
"aria-labelledby": `repere-popover-${m}`,
|
|
301
|
+
"data-repere-popover": "",
|
|
302
|
+
"data-position": u,
|
|
303
|
+
popover: n,
|
|
304
|
+
...t,
|
|
305
|
+
style: R,
|
|
306
|
+
children: o
|
|
307
|
+
}
|
|
308
|
+
);
|
|
309
|
+
}
|
|
310
|
+
);
|
|
311
|
+
V.displayName = "ReperePopover";
|
|
312
|
+
const Po = B(
|
|
313
|
+
({
|
|
314
|
+
children: o = "Got it",
|
|
315
|
+
onClick: e,
|
|
316
|
+
as: n,
|
|
317
|
+
...r
|
|
318
|
+
}, i) => {
|
|
319
|
+
const s = N(), a = (s == null ? void 0 : s.dismiss) || (() => {
|
|
320
|
+
}), l = s == null ? void 0 : s.popoverId;
|
|
321
|
+
return /* @__PURE__ */ w(
|
|
322
|
+
n || "button",
|
|
323
|
+
{
|
|
324
|
+
ref: i,
|
|
325
|
+
onClick: (m) => {
|
|
326
|
+
a(), e == null || e(m);
|
|
327
|
+
},
|
|
328
|
+
popovertarget: l,
|
|
329
|
+
popovertargetaction: "hide",
|
|
330
|
+
...r,
|
|
331
|
+
children: o
|
|
332
|
+
}
|
|
333
|
+
);
|
|
334
|
+
}
|
|
335
|
+
), Ao = Object.assign(Po, {
|
|
336
|
+
displayName: "ReperePopover.AcknowledgeButton"
|
|
337
|
+
}), q = B(({ children: o = "×", ...e }, n) => {
|
|
338
|
+
const r = N(), i = r == null ? void 0 : r.popoverId;
|
|
339
|
+
return /* @__PURE__ */ w(
|
|
340
|
+
"button",
|
|
341
|
+
{
|
|
342
|
+
ref: n,
|
|
343
|
+
popovertarget: i,
|
|
344
|
+
popovertargetaction: "hide",
|
|
345
|
+
"aria-label": "Close",
|
|
346
|
+
...e,
|
|
347
|
+
children: o
|
|
348
|
+
}
|
|
349
|
+
);
|
|
350
|
+
});
|
|
351
|
+
q.displayName = "ReperePopover.CloseButton";
|
|
352
|
+
const G = B(
|
|
353
|
+
({ children: o, ...e }, n) => /* @__PURE__ */ w("div", { ref: n, ...e, children: o })
|
|
354
|
+
);
|
|
355
|
+
G.displayName = "ReperePopover.Content";
|
|
356
|
+
const U = B(
|
|
357
|
+
({ children: o, ...e }, n) => /* @__PURE__ */ w("div", { ref: n, ...e, children: o })
|
|
358
|
+
);
|
|
359
|
+
U.displayName = "ReperePopover.Footer";
|
|
360
|
+
const Co = B(
|
|
361
|
+
({ children: o, as: e, ...n }, r) => {
|
|
362
|
+
const i = N(), s = (i == null ? void 0 : i.beaconId) || "unknown";
|
|
363
|
+
return /* @__PURE__ */ w(e || "h3", { ref: r, id: `repere-popover-${s}`, ...n, children: o });
|
|
364
|
+
}
|
|
365
|
+
), ho = Object.assign(Co, {
|
|
366
|
+
displayName: "ReperePopover.Title"
|
|
367
|
+
}), To = Object.assign(V, {
|
|
368
|
+
Title: ho,
|
|
369
|
+
Content: G,
|
|
370
|
+
Footer: U,
|
|
371
|
+
AcknowledgeButton: Ao,
|
|
372
|
+
CloseButton: q
|
|
373
|
+
}), wo = B(
|
|
374
|
+
({
|
|
375
|
+
children: o,
|
|
376
|
+
as: e,
|
|
377
|
+
style: n,
|
|
378
|
+
disableAnimation: r,
|
|
379
|
+
...i
|
|
380
|
+
}, s) => {
|
|
381
|
+
const {
|
|
382
|
+
calculatedPosition: a,
|
|
383
|
+
beaconId: l,
|
|
384
|
+
triggerAnimation: t,
|
|
385
|
+
triggerDismissAnimation: p,
|
|
386
|
+
isDismissing: m,
|
|
387
|
+
popoverId: d
|
|
388
|
+
} = N(), c = e || "button", u = O(() => !e || e === "button" ? M.button : M.create(c), [e, c]);
|
|
389
|
+
if (!a) return null;
|
|
390
|
+
const v = {
|
|
391
|
+
position: a.position,
|
|
392
|
+
top: a.top,
|
|
393
|
+
left: a.left,
|
|
394
|
+
zIndex: a.zIndex,
|
|
395
|
+
pointerEvents: "auto",
|
|
396
|
+
cursor: "pointer",
|
|
397
|
+
anchorName: `--repere-trigger-${l}`
|
|
398
|
+
}, A = n ? { ...v, ...n } : v, I = !r && (t || p), R = {
|
|
399
|
+
ref: s,
|
|
400
|
+
popovertarget: d,
|
|
401
|
+
"aria-label": `Beacon trigger for ${l}`,
|
|
402
|
+
"data-repere-trigger": "",
|
|
403
|
+
...i
|
|
404
|
+
};
|
|
405
|
+
if (I) {
|
|
406
|
+
const h = m && p ? p : t;
|
|
407
|
+
if (!h) return null;
|
|
408
|
+
const T = to(
|
|
409
|
+
a.translate,
|
|
410
|
+
h.variants
|
|
411
|
+
);
|
|
412
|
+
return /* @__PURE__ */ w(
|
|
413
|
+
u,
|
|
414
|
+
{
|
|
415
|
+
initial: "initial",
|
|
416
|
+
animate: m ? "exit" : "animate",
|
|
417
|
+
variants: T,
|
|
418
|
+
transition: h.transition,
|
|
419
|
+
...R,
|
|
420
|
+
style: A,
|
|
421
|
+
children: o
|
|
422
|
+
}
|
|
423
|
+
);
|
|
424
|
+
}
|
|
425
|
+
return /* @__PURE__ */ w(
|
|
426
|
+
c,
|
|
427
|
+
{
|
|
428
|
+
...R,
|
|
429
|
+
style: {
|
|
430
|
+
...A,
|
|
431
|
+
translate: `${a.translate.x} ${a.translate.y}`
|
|
432
|
+
},
|
|
433
|
+
children: o
|
|
434
|
+
}
|
|
435
|
+
);
|
|
436
|
+
}
|
|
437
|
+
), bo = Object.assign(wo, {
|
|
438
|
+
displayName: "RepereTrigger"
|
|
439
|
+
});
|
|
440
|
+
export {
|
|
441
|
+
Bo as Beacons,
|
|
442
|
+
To as ReperePopover,
|
|
443
|
+
bo as RepereTrigger
|
|
444
|
+
};
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { BasePopoverProps, BaseTriggerProps, Beacon, CalculatedBeaconPosition, Page, RepereConfig } from '@repere/core';
|
|
2
|
+
import { ComponentType, ReactElement, ReactNode } from 'react';
|
|
3
|
+
export interface ToggleEvent extends Event {
|
|
4
|
+
newState: "open" | "closed";
|
|
5
|
+
oldState: "open" | "closed";
|
|
6
|
+
}
|
|
7
|
+
export type ReactComponent = ComponentType<unknown> | ReactElement;
|
|
8
|
+
export type ReactBeacon = Beacon<ReactComponent>;
|
|
9
|
+
export type ReactPage = Page<ReactComponent>;
|
|
10
|
+
export interface RepereReactConfig extends RepereConfig<ReactComponent> {
|
|
11
|
+
pages: ReactPage[];
|
|
12
|
+
}
|
|
13
|
+
export interface TriggerComponentProps extends BaseTriggerProps {
|
|
14
|
+
beacon: ReactBeacon;
|
|
15
|
+
style: CalculatedBeaconPosition;
|
|
16
|
+
onClick: () => void;
|
|
17
|
+
popoverTarget?: string;
|
|
18
|
+
}
|
|
19
|
+
export interface PopoverComponentProps extends BasePopoverProps {
|
|
20
|
+
beacon: ReactBeacon;
|
|
21
|
+
onDismiss: () => void;
|
|
22
|
+
onClose: () => void;
|
|
23
|
+
}
|
|
24
|
+
export type TriggerComponent = ComponentType<TriggerComponentProps> | ReactElement | (() => ReactNode);
|
|
25
|
+
export type PopoverComponent = ComponentType<PopoverComponentProps> | ReactElement | (() => ReactNode);
|
|
26
|
+
declare module "react" {
|
|
27
|
+
interface HTMLAttributes<T> {
|
|
28
|
+
popover?: "auto" | "manual" | "hint" | "";
|
|
29
|
+
popovertarget?: string;
|
|
30
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
31
|
+
}
|
|
32
|
+
interface ButtonHTMLAttributes<T> {
|
|
33
|
+
popover?: "auto" | "manual" | "hint" | "";
|
|
34
|
+
popovertarget?: string;
|
|
35
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,wBAAwB,EACxB,IAAI,EACJ,YAAY,EACb,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,MAAM,WAAW,WAAY,SAAQ,KAAK;IACxC,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC7B;AAGD,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,YAAY,CAAC;AAGnE,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC;AAG7C,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,cAAc,CAAC;IACrE,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB;AAGD,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,wBAAwB,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,MAAM,EAAE,WAAW,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAGD,MAAM,MAAM,gBAAgB,GACxB,aAAa,CAAC,qBAAqB,CAAC,GACpC,YAAY,GACZ,CAAC,MAAM,SAAS,CAAC,CAAC;AAGtB,MAAM,MAAM,gBAAgB,GACxB,aAAa,CAAC,qBAAqB,CAAC,GACpC,YAAY,GACZ,CAAC,MAAM,SAAS,CAAC,CAAC;AAGtB,OAAO,OAAO,CAAC;AAEf,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAU,cAAc,CAAC,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,EAAE,CAAC;QAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;KAClD;IAGD,UAAU,oBAAoB,CAAC,CAAC;QAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,EAAE,CAAC;QAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;KAClD;CACF"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Beacon, CalculatedBeaconPosition, Position } from '@repere/core';
|
|
2
|
+
import { ReactElement } from 'react';
|
|
3
|
+
import { ReactComponent } from '../types';
|
|
4
|
+
export declare function renderTriggerComponent(triggerSource: ReactComponent | undefined, props: {
|
|
5
|
+
beacon: Beacon;
|
|
6
|
+
calculatedPosition: CalculatedBeaconPosition;
|
|
7
|
+
position: Position;
|
|
8
|
+
isOpen: boolean;
|
|
9
|
+
togglePopover: () => void;
|
|
10
|
+
}): ReactElement | null;
|
|
11
|
+
export declare function renderPopoverComponent(popoverSource: ReactComponent, props: {
|
|
12
|
+
beacon: Beacon;
|
|
13
|
+
position: Position;
|
|
14
|
+
handleDismiss: () => void;
|
|
15
|
+
hidePopover: () => void;
|
|
16
|
+
handlePopoverRef: (node: HTMLDivElement | null) => void;
|
|
17
|
+
popoverId: string;
|
|
18
|
+
}): ReactElement;
|
|
19
|
+
//# sourceMappingURL=renderRepereComponents.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"renderRepereComponents.d.ts","sourceRoot":"","sources":["../../src/utils/renderRepereComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,wBAAwB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAgC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAiB/C,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,cAAc,GAAG,SAAS,EACzC,KAAK,EAAE;IACL,MAAM,EAAE,MAAM,CAAC;IACf,kBAAkB,EAAE,wBAAwB,CAAC;IAC7C,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,GACA,YAAY,GAAG,IAAI,CAiBrB;AAED,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,cAAc,EAC7B,KAAK,EAAE;IACL,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;CACnB,GACA,YAAY,CAsBd"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Beacon, Offset, Position } from '@repere/core';
|
|
2
|
+
import { RepereReactConfig } from '../types';
|
|
3
|
+
export declare function resolveBeaconConfig(beacon: Beacon, config: RepereReactConfig): {
|
|
4
|
+
position: Position;
|
|
5
|
+
zIndex: number;
|
|
6
|
+
offset: Offset | undefined;
|
|
7
|
+
popoverPosition: Position;
|
|
8
|
+
popoverOffset: Offset;
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=resolveBeaconConfig.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveBeaconConfig.d.ts","sourceRoot":"","sources":["../../src/utils/resolveBeaconConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB;;;;;;EAqB5E"}
|
package/package.json
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@repere/react",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": {
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"import": "./dist/index.js"
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
"files": [
|
|
13
|
+
"dist"
|
|
14
|
+
],
|
|
15
|
+
"dependencies": {},
|
|
16
|
+
"peerDependencies": {
|
|
17
|
+
"motion": "^12.0.0",
|
|
18
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
19
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
20
|
+
"@repere/core": "0.0.0"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"@types/react": "^18.3.18",
|
|
24
|
+
"@types/react-dom": "^18.3.5",
|
|
25
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
26
|
+
"motion": "^12.23.26",
|
|
27
|
+
"react": "^19.2.3",
|
|
28
|
+
"react-dom": "^19.2.3",
|
|
29
|
+
"typescript": "^5.7.3",
|
|
30
|
+
"vite": "^6.0.11",
|
|
31
|
+
"vite-plugin-dts": "^4.4.2",
|
|
32
|
+
"@repere/core": "0.0.0"
|
|
33
|
+
},
|
|
34
|
+
"keywords": [
|
|
35
|
+
"react",
|
|
36
|
+
"tour",
|
|
37
|
+
"onboarding",
|
|
38
|
+
"beacon",
|
|
39
|
+
"popover",
|
|
40
|
+
"guide",
|
|
41
|
+
"tutorial",
|
|
42
|
+
"product-tour",
|
|
43
|
+
"user-onboarding"
|
|
44
|
+
],
|
|
45
|
+
"repository": {
|
|
46
|
+
"type": "git",
|
|
47
|
+
"url": "https://github.com/repere-ui/repere",
|
|
48
|
+
"directory": "packages/react"
|
|
49
|
+
},
|
|
50
|
+
"publishConfig": {
|
|
51
|
+
"access": "public"
|
|
52
|
+
},
|
|
53
|
+
"scripts": {
|
|
54
|
+
"dev": "vite build --watch",
|
|
55
|
+
"build": "vite build",
|
|
56
|
+
"typecheck": "tsc --noEmit",
|
|
57
|
+
"check": "pnpm exec biome check --write"
|
|
58
|
+
}
|
|
59
|
+
}
|