@creopse/bridge 0.1.0 → 0.1.1

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 (82) hide show
  1. package/dist/index-BWhWXGj9.js +13 -0
  2. package/dist/react/bridge.js +27 -0
  3. package/dist/react/bridge10.js +24 -0
  4. package/dist/react/bridge11.js +32 -0
  5. package/dist/react/bridge12.js +23 -0
  6. package/dist/react/bridge13.js +18 -0
  7. package/dist/react/bridge2.js +66 -0
  8. package/dist/react/bridge3.js +37 -0
  9. package/dist/react/bridge4.js +20 -0
  10. package/dist/react/bridge5.js +54 -0
  11. package/dist/react/bridge6.js +54 -0
  12. package/dist/react/bridge7.js +70 -0
  13. package/dist/react/bridge8.js +54 -0
  14. package/dist/react/bridge9.js +37 -0
  15. package/dist/vite/index.js +6 -2
  16. package/dist/vite/react.js +131 -147
  17. package/dist/vite/vue.js +123 -138
  18. package/dist/vue/bridge.js +15 -0
  19. package/dist/vue/bridge2.js +27 -0
  20. package/dist/vue/bridge3.js +1 -0
  21. package/dist/vue/bridge4.js +18 -0
  22. package/dist/vue/bridge5.js +1 -0
  23. package/dist/vue/bridge6.js +41 -0
  24. package/dist/vue/bridge7.js +16 -0
  25. package/package.json +38 -12
  26. package/dist/react/components/AsyncImg/AsyncImg.d.ts +0 -12
  27. package/dist/react/components/AsyncImg/AsyncImg.js +0 -20
  28. package/dist/react/components/AsyncImg/index.d.ts +0 -1
  29. package/dist/react/components/AsyncImg/index.js +0 -1
  30. package/dist/react/components/CustomTransition/CustomTransition.d.ts +0 -12
  31. package/dist/react/components/CustomTransition/CustomTransition.js +0 -48
  32. package/dist/react/components/CustomTransition/index.d.ts +0 -1
  33. package/dist/react/components/CustomTransition/index.js +0 -1
  34. package/dist/react/components/Image/Image.d.ts +0 -14
  35. package/dist/react/components/Image/Image.js +0 -20
  36. package/dist/react/components/Image/index.d.ts +0 -1
  37. package/dist/react/components/Image/index.js +0 -1
  38. package/dist/react/components/MountedTeleport/MountedTeleport.d.ts +0 -8
  39. package/dist/react/components/MountedTeleport/MountedTeleport.js +0 -43
  40. package/dist/react/components/MountedTeleport/index.d.ts +0 -1
  41. package/dist/react/components/MountedTeleport/index.js +0 -1
  42. package/dist/react/components/PageLayout/PageLayout.d.ts +0 -20
  43. package/dist/react/components/PageLayout/PageLayout.js +0 -30
  44. package/dist/react/components/PageLayout/index.d.ts +0 -1
  45. package/dist/react/components/PageLayout/index.js +0 -1
  46. package/dist/react/components/ReadMore/ReadMore.d.ts +0 -12
  47. package/dist/react/components/ReadMore/ReadMore.js +0 -33
  48. package/dist/react/components/ReadMore/index.d.ts +0 -1
  49. package/dist/react/components/ReadMore/index.js +0 -1
  50. package/dist/react/components/StickyBottom/StickyBottom.d.ts +0 -9
  51. package/dist/react/components/StickyBottom/StickyBottom.js +0 -57
  52. package/dist/react/components/StickyBottom/index.d.ts +0 -1
  53. package/dist/react/components/StickyBottom/index.js +0 -1
  54. package/dist/react/components/StickyTop/StickyTop.d.ts +0 -9
  55. package/dist/react/components/StickyTop/StickyTop.js +0 -56
  56. package/dist/react/components/StickyTop/index.d.ts +0 -1
  57. package/dist/react/components/StickyTop/index.js +0 -1
  58. package/dist/react/components/index.d.ts +0 -8
  59. package/dist/react/components/index.js +0 -8
  60. package/dist/react/hooks/access.d.ts +0 -25
  61. package/dist/react/hooks/access.js +0 -41
  62. package/dist/react/hooks/core-bridge.d.ts +0 -13
  63. package/dist/react/hooks/core-bridge.js +0 -19
  64. package/dist/react/hooks/responsive.d.ts +0 -15
  65. package/dist/react/hooks/responsive.js +0 -42
  66. package/dist/react/hooks/user-preference.d.ts +0 -4
  67. package/dist/react/hooks/user-preference.js +0 -17
  68. package/dist/utils/constants.d.ts +0 -2
  69. package/dist/utils/constants.js +0 -3
  70. package/dist/utils/functions.d.ts +0 -33
  71. package/dist/utils/functions.js +0 -53
  72. package/dist/vite/index.d.ts +0 -2
  73. package/dist/vite/react.d.ts +0 -45
  74. package/dist/vite/vue.d.ts +0 -40
  75. package/dist/vue/composables/access.d.ts +0 -25
  76. package/dist/vue/composables/access.js +0 -58
  77. package/dist/vue/composables/core-bridge.d.ts +0 -12
  78. package/dist/vue/composables/core-bridge.js +0 -15
  79. package/dist/vue/composables/responsive.d.ts +0 -15
  80. package/dist/vue/composables/responsive.js +0 -35
  81. package/dist/vue/composables/user-preference.d.ts +0 -12
  82. package/dist/vue/composables/user-preference.js +0 -14
@@ -0,0 +1,16 @@
1
+ import { Bool as e } from "@creopse/utils";
2
+ import { ref as r } from "vue";
3
+ import { useI18n as t } from "vue-i18n";
4
+ const s = () => {
5
+ const { locale: o } = t();
6
+ return {
7
+ defaultPrefs: r({
8
+ inAppNotifEnabled: e.TRUE,
9
+ emailNotifEnabled: e.TRUE,
10
+ locale: o.value
11
+ })
12
+ };
13
+ };
14
+ export {
15
+ s as useUserPreference
16
+ };
package/package.json CHANGED
@@ -1,19 +1,37 @@
1
1
  {
2
2
  "name": "@creopse/bridge",
3
3
  "description": "Creopse Bridge Toolkit",
4
- "version": "0.1.0",
4
+ "version": "0.1.1",
5
5
  "private": false,
6
6
  "author": "Noé Gnanih <noegnanih@gmail.com>",
7
7
  "license": "MIT",
8
8
  "type": "module",
9
9
  "main": "dist/index.js",
10
10
  "exports": {
11
- "./vite": "./dist/vite/index.js",
12
- "./vite/vue": "./dist/vite/vue.js",
13
- "./vite/react": "./dist/vite/react.js",
14
- "./vue": "./dist/vue/index.js",
15
- "./react": "./dist/react/index.js",
16
- "./shared": "./dist/shared/index.js"
11
+ "./vite": {
12
+ "types": "./dist/vite/index.d.ts",
13
+ "import": "./dist/vite/index.js"
14
+ },
15
+ "./vite/vue": {
16
+ "types": "./dist/vite/vue.d.ts",
17
+ "import": "./dist/vite/vue.js"
18
+ },
19
+ "./vite/react": {
20
+ "types": "./dist/vite/react.d.ts",
21
+ "import": "./dist/vite/react.js"
22
+ },
23
+ "./vue": {
24
+ "types": "./dist/vue/index.d.ts",
25
+ "import": "./dist/vue/index.js"
26
+ },
27
+ "./react": {
28
+ "types": "./dist/react/index.d.ts",
29
+ "import": "./dist/react/index.js"
30
+ },
31
+ "./shared": {
32
+ "types": "./dist/shared/index.d.ts",
33
+ "import": "./dist/shared/index.js"
34
+ }
17
35
  },
18
36
  "types": "dist/index.d.ts",
19
37
  "files": [
@@ -25,10 +43,12 @@
25
43
  "@iconify/vue": "^5.0.0",
26
44
  "@vueuse/core": "^10.11.1",
27
45
  "naive-ui": "^2.44.1",
46
+ "pinia": "^3.0.0",
28
47
  "react": "^19.2.4",
29
48
  "react-dom": "^19.2.4",
30
49
  "vue": "^3.5.27",
31
50
  "vue-i18n": "^11.3.0",
51
+ "vue-router": "^4.0.0",
32
52
  "zustand": "^5.0.12"
33
53
  },
34
54
  "peerDependenciesMeta": {
@@ -50,6 +70,12 @@
50
70
  "vue-i18n": {
51
71
  "optional": true
52
72
  },
73
+ "vue-router": {
74
+ "optional": true
75
+ },
76
+ "pinia": {
77
+ "optional": true
78
+ },
53
79
  "react": {
54
80
  "optional": true
55
81
  },
@@ -62,7 +88,7 @@
62
88
  },
63
89
  "dependencies": {
64
90
  "framer-motion": "^12.23.9",
65
- "@creopse/utils": "0.1.0"
91
+ "@creopse/utils": "0.1.1"
66
92
  },
67
93
  "devDependencies": {
68
94
  "@originjs/vite-plugin-federation": "^1.4.1",
@@ -70,15 +96,15 @@
70
96
  "@types/react-dom": "^19.1.6",
71
97
  "@vitejs/plugin-basic-ssl": "^2.3.0",
72
98
  "@vitejs/plugin-react": "^4.6.0",
73
- "@vitejs/plugin-vue": "^6.0.0",
99
+ "@vitejs/plugin-vue": "^6.0.5",
74
100
  "comment-json": "^4.6.2",
75
101
  "rollup-plugin-copy": "^3.5.0",
76
- "tsc-alias": "^1.8.16",
102
+ "tsx": "^4.21.0",
77
103
  "typescript": "~5.8.3",
78
104
  "unocss": "^66.6.7",
79
105
  "vite": "^7.0.5",
80
- "vite-plugin-auto-import-lite": "^0.0.2",
81
106
  "vite-plugin-i18next-loader": "^3.1.3",
107
+ "vite-plugin-auto-import-lite": "^0.0.2",
82
108
  "vite-plugin-json5": "^1.2.0",
83
109
  "vite-plugin-top-level-await": "^1.6.0"
84
110
  },
@@ -95,6 +121,6 @@
95
121
  "access": "public"
96
122
  },
97
123
  "scripts": {
98
- "build": "tsc -b && tsc-alias"
124
+ "build": "tsx build.ts"
99
125
  }
100
126
  }
@@ -1,12 +0,0 @@
1
- import React, { type CSSProperties } from 'react';
2
- export interface Props {
3
- load: () => Promise<string>;
4
- alt?: string;
5
- width?: string | number;
6
- height?: string | number;
7
- title?: string;
8
- loading?: 'lazy' | 'eager';
9
- style?: CSSProperties;
10
- }
11
- declare const AsyncImg: React.FC<Props>;
12
- export default AsyncImg;
@@ -1,20 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState, useEffect } from 'react';
3
- const AsyncImg = ({ load, alt, width, height, title, loading, style }) => {
4
- const [url, setUrl] = useState('');
5
- useEffect(() => {
6
- const init = async () => {
7
- try {
8
- const loadedUrl = await load();
9
- setUrl(loadedUrl);
10
- }
11
- catch (error) {
12
- console.error('Failed to load image:', error);
13
- // Optionally set a fallback image or error state
14
- }
15
- };
16
- init();
17
- }, [load]);
18
- return (_jsx("img", { src: url, alt: alt, title: title, style: style, width: width, height: height, loading: loading }));
19
- };
20
- export default AsyncImg;
@@ -1 +0,0 @@
1
- export { default as AsyncImg, type Props as AsyncImgProps } from './AsyncImg';
@@ -1 +0,0 @@
1
- export { default as AsyncImg } from './AsyncImg';
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- type Animation = 'fade' | 'slide-fade' | 'bounce';
3
- type Mode = 'wait' | 'sync' | 'popLayout' | undefined;
4
- export interface Props {
5
- name?: Animation;
6
- mode?: Mode;
7
- appear?: boolean;
8
- children?: React.ReactNode;
9
- contentKey?: string | number;
10
- }
11
- declare const CustomTransition: React.FC<Props>;
12
- export default CustomTransition;
@@ -1,48 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { motion, AnimatePresence } from 'framer-motion';
3
- const CustomTransition = ({ name = 'fade', mode = 'wait', appear = false, children, contentKey = 'default', }) => {
4
- const animations = {
5
- fade: {
6
- initial: { opacity: 0 },
7
- animate: { opacity: 1 },
8
- exit: { opacity: 0 },
9
- transition: { duration: 0.5, ease: 'easeInOut' },
10
- },
11
- 'slide-fade': {
12
- initial: { opacity: 0, x: 20 },
13
- animate: { opacity: 1, x: 0 },
14
- exit: { opacity: 0, x: 20 },
15
- transition: {
16
- duration: 0.3,
17
- ease: 'easeOut'
18
- },
19
- // Separate exit transition
20
- exitTransition: {
21
- duration: 0.8,
22
- ease: [0.36, 0.66, 0.04, 1]
23
- },
24
- },
25
- bounce: {
26
- initial: { scale: 0 },
27
- animate: { scale: 1 },
28
- exit: { scale: 0 },
29
- transition: {
30
- duration: 0.5,
31
- type: 'spring',
32
- bounce: 0.4,
33
- },
34
- },
35
- };
36
- const animation = animations[name];
37
- // For AnimatePresence modes
38
- if (mode) {
39
- return (_jsx(AnimatePresence, { mode: mode, initial: appear, children: _jsx(motion.div, { initial: animation.initial, animate: animation.animate, exit: animation.exit, transition: animation.transition, ...(name === 'slide-fade' && {
40
- exit: animation.exit,
41
- // @ts-expect-error - exitTransition is a custom property we added
42
- transition: { ...animation.transition, exit: animation.exitTransition }
43
- }), children: children }, contentKey) }));
44
- }
45
- // For simple animations without AnimatePresence
46
- return (_jsx(motion.div, { initial: appear ? animation.initial : false, animate: animation.animate, transition: animation.transition, children: children }));
47
- };
48
- export default CustomTransition;
@@ -1 +0,0 @@
1
- export { default as CustomTransition, type Props as CustomTransitionProps, } from './CustomTransition';
@@ -1 +0,0 @@
1
- export { default as CustomTransition, } from './CustomTransition';
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- export interface Props {
3
- src: string;
4
- alt?: string;
5
- width?: string | number;
6
- height?: string | number;
7
- title?: string;
8
- loading?: 'lazy' | 'eager';
9
- style?: React.CSSProperties;
10
- size?: 'small' | 'medium' | 'large' | 'original';
11
- sync?: boolean;
12
- }
13
- declare const Image: React.FC<Props>;
14
- export default Image;
@@ -1,20 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { AsyncImg } from '../AsyncImg';
3
- import { useCoreBridge } from '../../hooks/core-bridge';
4
- const Image = (props) => {
5
- const { src, alt = '', width, height, title, loading, style, size = 'original', sync = false } = props;
6
- const { helpers: { getImage }, } = useCoreBridge();
7
- const filteredProps = {
8
- alt,
9
- width,
10
- height,
11
- title,
12
- loading,
13
- style,
14
- };
15
- if (sync) {
16
- return _jsx("img", { src: src, ...filteredProps });
17
- }
18
- return _jsx(AsyncImg, { load: () => getImage(src, size), ...filteredProps });
19
- };
20
- export default Image;
@@ -1 +0,0 @@
1
- export { default as Image, type Props as ImageProps } from './Image';
@@ -1 +0,0 @@
1
- export { default as Image } from './Image';
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- export interface Props {
3
- to: string | HTMLElement;
4
- children: React.ReactNode;
5
- disabled?: boolean;
6
- }
7
- declare const MountedTeleport: React.FC<Props>;
8
- export default MountedTeleport;
@@ -1,43 +0,0 @@
1
- import { useEffect, useState } from 'react';
2
- import { createPortal } from 'react-dom';
3
- const MountedTeleport = ({ to, children, disabled = false, }) => {
4
- const [isMounted, setIsMounted] = useState(false);
5
- const [targetElement, setTargetElement] = useState(null);
6
- useEffect(() => {
7
- setIsMounted(true);
8
- // Only cleanup on unmount, not on every effect run
9
- return () => {
10
- setIsMounted(false);
11
- };
12
- }, []);
13
- useEffect(() => {
14
- if (!isMounted || disabled) {
15
- setTargetElement(null);
16
- return;
17
- }
18
- let target = null;
19
- if (typeof to === 'string') {
20
- target = document.querySelector(to);
21
- if (!target) {
22
- console.warn(`MountedTeleport: Target element not found for selector "${to}"`);
23
- setTargetElement(null);
24
- return;
25
- }
26
- }
27
- else if (to instanceof HTMLElement) {
28
- target = to;
29
- }
30
- else {
31
- console.warn('MountedTeleport: Invalid target type. Expected string selector or HTMLElement.');
32
- setTargetElement(null);
33
- return;
34
- }
35
- setTargetElement(target);
36
- }, [to, isMounted, disabled]);
37
- // Don't render if not mounted, disabled, or no valid target
38
- if (!isMounted || disabled || !targetElement) {
39
- return null;
40
- }
41
- return createPortal(children, targetElement);
42
- };
43
- export default MountedTeleport;
@@ -1 +0,0 @@
1
- export { default as MountedTeleport, type Props as MountedTeleportProps, } from './MountedTeleport';
@@ -1 +0,0 @@
1
- export { default as MountedTeleport, } from './MountedTeleport';
@@ -1,20 +0,0 @@
1
- import { type ReactNode } from 'react';
2
- export interface Props {
3
- title?: string | null;
4
- displayTitle?: boolean;
5
- onBack?: (() => void) | null;
6
- header?: ReactNode;
7
- headerExtra?: ReactNode;
8
- titleSlot?: ReactNode;
9
- children?: ReactNode;
10
- }
11
- export interface PageHeaderProps {
12
- title?: ReactNode;
13
- extra?: ReactNode;
14
- header?: ReactNode;
15
- onBack?: () => void;
16
- children?: ReactNode;
17
- }
18
- export declare const PageHeader: ({ title, extra, header, onBack, children, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
19
- export declare const PageLayout: ({ title, displayTitle, onBack, header, headerExtra, titleSlot, children, }: Props) => import("react/jsx-runtime").JSX.Element;
20
- export default PageLayout;
@@ -1,30 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Icon } from '@iconify/react';
3
- import { useResponsive } from '../../hooks/responsive';
4
- export const PageHeader = ({ title, extra, header, onBack, children, }) => {
5
- return (_jsxs("div", { className: "n-page-header", children: [header && (_jsx("div", { className: "n-page-header__header", children: header })), _jsxs("div", { className: "n-page-header__content-header", children: [_jsx("div", { className: "n-page-header__back", onClick: onBack, role: "button", "aria-label": "Go back", children: _jsx("div", { className: "n-page-header-back", children: _jsx(Icon, { icon: "ic:baseline-arrow-back-ios" }) }) }), title && (_jsx("div", { className: "n-page-header__title", children: title })), extra && (_jsx("div", { className: "n-page-header__extra", children: extra }))] }), children && (_jsx("div", { className: "n-page-header__content", children: children }))] }));
6
- };
7
- // ——— PageLayout ——————————————————————————————————————————————————————————————
8
- export const PageLayout = ({ title = null, displayTitle = true, onBack = null, header, headerExtra, titleSlot, children, }) => {
9
- const { isMobile } = useResponsive();
10
- const handleBack = () => {
11
- if (onBack) {
12
- onBack();
13
- }
14
- else {
15
- window.__creopse__.router.back();
16
- }
17
- };
18
- return (_jsxs("div", { children: [_jsx(PageHeader, { header: header, title: displayTitle
19
- ? titleSlot ?? (_jsx("span", { style: {
20
- display: '-webkit-box',
21
- WebkitLineClamp: 2,
22
- WebkitBoxOrient: 'vertical',
23
- overflow: 'hidden',
24
- wordBreak: 'break-word',
25
- }, children: title || '' }))
26
- : undefined, extra: headerExtra ? (_jsx("div", { className: isMobile
27
- ? 'flex flex-col items-end gap-2'
28
- : 'flex items-center gap-2', children: headerExtra })) : undefined, onBack: handleBack }), children] }));
29
- };
30
- export default PageLayout;
@@ -1 +0,0 @@
1
- export { default as PageLayout, type Props as PageLayoutProps, PageHeader, type PageHeaderProps, } from './PageLayout';
@@ -1 +0,0 @@
1
- export { default as PageLayout, PageHeader, } from './PageLayout';
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- export interface Props {
3
- moreStr?: string;
4
- lessStr?: string;
5
- text: string;
6
- link?: string;
7
- maxChars?: number;
8
- className?: string;
9
- linkClassName?: string;
10
- }
11
- declare const ReadMore: React.FC<Props>;
12
- export default ReadMore;
@@ -1,33 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- const ReadMore = ({ moreStr = 'Read more', lessStr = 'Read less', link = '#', maxChars = 100, text, className = '', linkClassName = '', }) => {
4
- const [isExpanded, setIsExpanded] = useState(false);
5
- const formattedText = () => {
6
- if (!isExpanded && text.length > maxChars) {
7
- return text.substring(0, maxChars).trim() + '...';
8
- }
9
- return text;
10
- };
11
- const handleToggle = (event) => {
12
- // Always prevent default for toggle functionality
13
- event.preventDefault();
14
- setIsExpanded(!isExpanded);
15
- };
16
- // Don't render anything if text is empty
17
- if (!text) {
18
- return null;
19
- }
20
- const shouldShowToggle = text.length > maxChars;
21
- return (_jsxs("div", { className: className, children: [_jsx("span", { children: formattedText() }), shouldShowToggle && (_jsxs(_Fragment, { children: [' ', !isExpanded ? (_jsx("a", { href: link, onClick: handleToggle, className: linkClassName, role: "button", tabIndex: 0, onKeyDown: (e) => {
22
- if (e.key === 'Enter' || e.key === ' ') {
23
- e.preventDefault();
24
- setIsExpanded(true);
25
- }
26
- }, children: moreStr })) : (lessStr && (_jsx("a", { href: link, onClick: handleToggle, className: linkClassName, role: "button", tabIndex: 0, onKeyDown: (e) => {
27
- if (e.key === 'Enter' || e.key === ' ') {
28
- e.preventDefault();
29
- setIsExpanded(false);
30
- }
31
- }, children: lessStr })))] }))] }));
32
- };
33
- export default ReadMore;
@@ -1 +0,0 @@
1
- export { default as ReadMore, type Props as ReadMoreProps } from './ReadMore';
@@ -1 +0,0 @@
1
- export { default as ReadMore } from './ReadMore';
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- export interface Props {
3
- bottom?: number;
4
- zIndex?: number;
5
- className?: string;
6
- children?: React.ReactNode;
7
- }
8
- declare const StickyBottom: React.FC<Props>;
9
- export default StickyBottom;
@@ -1,57 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState, useEffect, useRef } from 'react';
3
- const StickyBottom = ({ bottom = 0, zIndex = 1, className = '', children = _jsx("div", { children: "Sticky Bottom" }), }) => {
4
- const elRef = useRef(null);
5
- const [isSticky, setIsSticky] = useState(false);
6
- const [width, setWidth] = useState('auto');
7
- const [height, setHeight] = useState('auto');
8
- useEffect(() => {
9
- const handleScroll = () => {
10
- if (!elRef.current)
11
- return;
12
- const rect = elRef.current.getBoundingClientRect();
13
- const viewportHeight = window.innerHeight;
14
- // Element should be sticky when it would go below the specified bottom position
15
- const shouldStick = rect.bottom <= viewportHeight - bottom;
16
- if (shouldStick && !isSticky) {
17
- setWidth(rect.width + 'px');
18
- setHeight(rect.height + 'px');
19
- setIsSticky(true);
20
- }
21
- else if (!shouldStick && isSticky) {
22
- setIsSticky(false);
23
- setWidth('auto');
24
- }
25
- };
26
- const handleResize = () => {
27
- if (!isSticky && elRef.current) {
28
- // Update dimensions when not sticky
29
- const rect = elRef.current.getBoundingClientRect();
30
- setHeight(rect.height + 'px');
31
- }
32
- };
33
- // Initial setup
34
- if (elRef.current) {
35
- const rect = elRef.current.getBoundingClientRect();
36
- setHeight(rect.height + 'px');
37
- }
38
- window.addEventListener('scroll', handleScroll);
39
- window.addEventListener('resize', handleResize);
40
- // Check initial state
41
- handleScroll();
42
- return () => {
43
- window.removeEventListener('scroll', handleScroll);
44
- window.removeEventListener('resize', handleResize);
45
- };
46
- }, [bottom, isSticky]);
47
- return (_jsx("div", { ref: elRef, style: {
48
- height: isSticky ? height : 'auto',
49
- zIndex
50
- }, children: _jsx("div", { className: className, style: {
51
- position: isSticky ? 'fixed' : 'static',
52
- bottom: isSticky ? `${bottom}px` : 'auto',
53
- width: isSticky ? width : 'auto',
54
- zIndex,
55
- }, children: children }) }));
56
- };
57
- export default StickyBottom;
@@ -1 +0,0 @@
1
- export { default as StickyBottom, type Props as StickyBottomProps, } from './StickyBottom';
@@ -1 +0,0 @@
1
- export { default as StickyBottom, } from './StickyBottom';
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- export interface Props {
3
- top?: number;
4
- zIndex?: number;
5
- className?: string;
6
- children?: React.ReactNode;
7
- }
8
- declare const StickyTop: React.FC<Props>;
9
- export default StickyTop;
@@ -1,56 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState, useEffect, useRef } from 'react';
3
- const StickyTop = ({ top = 0, zIndex = 1, className = '', children = _jsx("div", { children: "Sticky Top" }), }) => {
4
- const elRef = useRef(null);
5
- const [isSticky, setIsSticky] = useState(false);
6
- const [width, setWidth] = useState('auto');
7
- const [height, setHeight] = useState('auto');
8
- useEffect(() => {
9
- const handleScroll = () => {
10
- if (!elRef.current)
11
- return;
12
- const rect = elRef.current.getBoundingClientRect();
13
- // Element should be sticky when it would go above the specified top position
14
- const shouldStick = rect.top <= top;
15
- if (shouldStick && !isSticky) {
16
- setWidth(rect.width + 'px');
17
- setHeight(rect.height + 'px');
18
- setIsSticky(true);
19
- }
20
- else if (!shouldStick && isSticky) {
21
- setIsSticky(false);
22
- setWidth('auto');
23
- }
24
- };
25
- const handleResize = () => {
26
- if (!isSticky && elRef.current) {
27
- // Update dimensions when not sticky
28
- const rect = elRef.current.getBoundingClientRect();
29
- setHeight(rect.height + 'px');
30
- }
31
- };
32
- // Initial setup
33
- if (elRef.current) {
34
- const rect = elRef.current.getBoundingClientRect();
35
- setHeight(rect.height + 'px');
36
- }
37
- window.addEventListener('scroll', handleScroll);
38
- window.addEventListener('resize', handleResize);
39
- // Check initial state
40
- handleScroll();
41
- return () => {
42
- window.removeEventListener('scroll', handleScroll);
43
- window.removeEventListener('resize', handleResize);
44
- };
45
- }, [top, isSticky]);
46
- return (_jsx("div", { ref: elRef, style: {
47
- height: isSticky ? height : 'auto',
48
- zIndex
49
- }, children: _jsx("div", { className: className, style: {
50
- position: isSticky ? 'fixed' : 'static',
51
- top: isSticky ? `${top}px` : 'auto',
52
- width: isSticky ? width : 'auto',
53
- zIndex,
54
- }, children: children }) }));
55
- };
56
- export default StickyTop;
@@ -1 +0,0 @@
1
- export { default as StickyTop, type Props as StickyTopProps } from './StickyTop';
@@ -1 +0,0 @@
1
- export { default as StickyTop } from './StickyTop';
@@ -1,8 +0,0 @@
1
- export * from './PageLayout';
2
- export * from './AsyncImg';
3
- export * from './Image';
4
- export * from './StickyTop';
5
- export * from './StickyBottom';
6
- export * from './CustomTransition';
7
- export * from './ReadMore';
8
- export * from './MountedTeleport';
@@ -1,8 +0,0 @@
1
- export * from './PageLayout';
2
- export * from './AsyncImg';
3
- export * from './Image';
4
- export * from './StickyTop';
5
- export * from './StickyBottom';
6
- export * from './CustomTransition';
7
- export * from './ReadMore';
8
- export * from './MountedTeleport';
@@ -1,25 +0,0 @@
1
- import { AccessGuard } from '@creopse/utils/enums';
2
- import type { NTagType } from '@creopse/utils/types';
3
- export declare const useAccess: () => {
4
- accessGuards: {
5
- label: string;
6
- value: AccessGuard;
7
- tagType: string;
8
- }[];
9
- getAccessGuardLabel: (value: AccessGuard) => string | undefined;
10
- getAccessGuardTagType: (value: AccessGuard) => NTagType;
11
- getRoleName: (roles: {
12
- id: number;
13
- name: string;
14
- }[], id: number) => string;
15
- isPermissionNative: (name: string) => boolean;
16
- userIsSuperAdmin: (roles: {
17
- name: string;
18
- }[]) => boolean;
19
- userCan: (permissions: {
20
- name: string;
21
- }[], permissionName: string) => boolean;
22
- userIs: (roles: {
23
- name: string;
24
- }[], roleName: string) => boolean;
25
- };