@xyd-js/components 0.1.0-build.168
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/.idea/git_toolbox_blame.xml +6 -0
- package/.idea/modules.xml +8 -0
- package/.idea/vcs.xml +6 -0
- package/.idea/xyd-components.iml +12 -0
- package/CHANGELOG.md +1369 -0
- package/LICENSE +21 -0
- package/README.md +3 -0
- package/TODO.md +1 -0
- package/coder.ts +1 -0
- package/content.ts +1 -0
- package/dist/Button-BLA2ghHZ.js +2 -0
- package/dist/Button-BLA2ghHZ.js.map +1 -0
- package/dist/Button-BTJ2hIal.js +2 -0
- package/dist/Button-BTJ2hIal.js.map +1 -0
- package/dist/Button-r4BCrEjy.js +2 -0
- package/dist/Button-r4BCrEjy.js.map +1 -0
- package/dist/CodeSample-BZ5tvyWY.js +2 -0
- package/dist/CodeSample-BZ5tvyWY.js.map +1 -0
- package/dist/CodeSample-BqXDbWdi.js +2 -0
- package/dist/CodeSample-BqXDbWdi.js.map +1 -0
- package/dist/CodeSample-Cqv86IdN.js +2 -0
- package/dist/CodeSample-Cqv86IdN.js.map +1 -0
- package/dist/Icon--77MqplU.js +2 -0
- package/dist/Icon--77MqplU.js.map +1 -0
- package/dist/Icon-DbNmvK_Q.js +2 -0
- package/dist/Icon-DbNmvK_Q.js.map +1 -0
- package/dist/Icon-uVIU1LW6.js +2 -0
- package/dist/Icon-uVIU1LW6.js.map +1 -0
- package/dist/PageFirstSlide-BDNmCTiJ.js +2 -0
- package/dist/PageFirstSlide-BDNmCTiJ.js.map +1 -0
- package/dist/PageFirstSlide-BpZ42bEU.js +2 -0
- package/dist/PageFirstSlide-BpZ42bEU.js.map +1 -0
- package/dist/PageFirstSlide-CqxiyK57.js +2 -0
- package/dist/PageFirstSlide-CqxiyK57.js.map +1 -0
- package/dist/TabsAnalytics-B_JYpawG.js +2 -0
- package/dist/TabsAnalytics-B_JYpawG.js.map +1 -0
- package/dist/TabsAnalytics-DAOfTZgv.js +2 -0
- package/dist/TabsAnalytics-DAOfTZgv.js.map +1 -0
- package/dist/TabsAnalytics-Dhyadlbu.js +2 -0
- package/dist/TabsAnalytics-Dhyadlbu.js.map +1 -0
- package/dist/Update-53fEhmjh.js +2 -0
- package/dist/Update-53fEhmjh.js.map +1 -0
- package/dist/Update-CFi6uapq.js +2 -0
- package/dist/Update-CFi6uapq.js.map +1 -0
- package/dist/Update-CiMIOgZi.js +2 -0
- package/dist/Update-CiMIOgZi.js.map +1 -0
- package/dist/VideoGuide-C0K9fFar.js +2 -0
- package/dist/VideoGuide-C0K9fFar.js.map +1 -0
- package/dist/VideoGuide-CJYkuLst.js +2 -0
- package/dist/VideoGuide-CJYkuLst.js.map +1 -0
- package/dist/VideoGuide-DBY-EyxG.js +2 -0
- package/dist/VideoGuide-DBY-EyxG.js.map +1 -0
- package/dist/_rollupPluginBabelHelpers-CvhQFv1t.js +4 -0
- package/dist/_rollupPluginBabelHelpers-CvhQFv1t.js.map +1 -0
- package/dist/_rollupPluginBabelHelpers-DSwDY1Dm.js +4 -0
- package/dist/_rollupPluginBabelHelpers-DSwDY1Dm.js.map +1 -0
- package/dist/_rollupPluginBabelHelpers-Dc-ocx4G.js +4 -0
- package/dist/_rollupPluginBabelHelpers-Dc-ocx4G.js.map +1 -0
- package/dist/coder/themes/classic.css +57 -0
- package/dist/coder/themes/classic.d.ts +96 -0
- package/dist/coder/themes/classic.js +2 -0
- package/dist/coder/themes/classic.js.map +1 -0
- package/dist/coder/themes/cosmo.css +64 -0
- package/dist/coder/themes/cosmo.d.ts +96 -0
- package/dist/coder/themes/cosmo.js +2 -0
- package/dist/coder/themes/cosmo.js.map +1 -0
- package/dist/coder.d.ts +94 -0
- package/dist/coder.js +2 -0
- package/dist/coder.js.map +1 -0
- package/dist/content.d.ts +411 -0
- package/dist/content.js +2 -0
- package/dist/content.js.map +1 -0
- package/dist/index.css +282 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/layouts.d.ts +33 -0
- package/dist/layouts.js +2 -0
- package/dist/layouts.js.map +1 -0
- package/dist/pages.d.ts +176 -0
- package/dist/pages.js +2 -0
- package/dist/pages.js.map +1 -0
- package/dist/system.d.ts +45 -0
- package/dist/system.js +2 -0
- package/dist/system.js.map +1 -0
- package/dist/useUXClick-DK3cTAMR.js +2 -0
- package/dist/useUXClick-DK3cTAMR.js.map +1 -0
- package/dist/useUXClick-DO6qBcRy.js +2 -0
- package/dist/useUXClick-DO6qBcRy.js.map +1 -0
- package/dist/useUXClick-NwpsiuK9.js +2 -0
- package/dist/useUXClick-NwpsiuK9.js.map +1 -0
- package/dist/useUXEvents-CJtgGV4R.js +2 -0
- package/dist/useUXEvents-CJtgGV4R.js.map +1 -0
- package/dist/useUXEvents-Cxgl7xb-.js +2 -0
- package/dist/useUXEvents-Cxgl7xb-.js.map +1 -0
- package/dist/useUXEvents-XqAGxoEj.js +2 -0
- package/dist/useUXEvents-XqAGxoEj.js.map +1 -0
- package/dist/useUXScrollDepth-3rk3Z95r.js +2 -0
- package/dist/useUXScrollDepth-3rk3Z95r.js.map +1 -0
- package/dist/useUXScrollDepth-BwK-XOBg.js +2 -0
- package/dist/useUXScrollDepth-BwK-XOBg.js.map +1 -0
- package/dist/useUXScrollDepth-DKre7PBz.js +2 -0
- package/dist/useUXScrollDepth-DKre7PBz.js.map +1 -0
- package/dist/uxsdk.d.ts +53 -0
- package/dist/uxsdk.js +2 -0
- package/dist/uxsdk.js.map +1 -0
- package/dist/views.d.ts +18 -0
- package/dist/views.js +2 -0
- package/dist/views.js.map +1 -0
- package/dist/writer.d.ts +580 -0
- package/dist/writer.js +2 -0
- package/dist/writer.js.map +1 -0
- package/docs/.nojekyll +1 -0
- package/docs/assets/hierarchy.js +1 -0
- package/docs/assets/highlight.css +22 -0
- package/docs/assets/icons.js +18 -0
- package/docs/assets/icons.svg +1 -0
- package/docs/assets/main.js +60 -0
- package/docs/assets/navigation.js +1 -0
- package/docs/assets/search.js +1 -0
- package/docs/assets/style.css +1640 -0
- package/docs/functions/GuideCard.html +6 -0
- package/docs/hierarchy.html +1 -0
- package/docs/index.html +2 -0
- package/docs/interfaces/GuideCardProps.html +18 -0
- package/docs/modules.html +1 -0
- package/index.ts +0 -0
- package/layouts.ts +1 -0
- package/output.txt +13 -0
- package/package.json +81 -0
- package/pages.ts +1 -0
- package/postcss.config.cjs +5 -0
- package/rollup.config.js +195 -0
- package/src/coder/Code/Code.styles.tsx +151 -0
- package/src/coder/Code/Code.tsx +171 -0
- package/src/coder/Code/CodeLoader.tsx +10 -0
- package/src/coder/Code/annotations.tsx +51 -0
- package/src/coder/Code/highlight.ts +208 -0
- package/src/coder/Code/index.ts +16 -0
- package/src/coder/CodeCopy/CodeCopy.styles.tsx +21 -0
- package/src/coder/CodeCopy/CodeCopy.tsx +36 -0
- package/src/coder/CodeCopy/index.ts +7 -0
- package/src/coder/CodeSample/CodeSample.tsx +118 -0
- package/src/coder/CodeSample/CodeSampleAnalytics.tsx +112 -0
- package/src/coder/CodeSample/index.ts +11 -0
- package/src/coder/CodeSample/withLocalStored.tsx +50 -0
- package/src/coder/CodeTabs/CodeTabs.styles.tsx +126 -0
- package/src/coder/CodeTabs/CodeTabs.tsx +128 -0
- package/src/coder/CodeTabs/index.ts +6 -0
- package/src/coder/CodeTheme/CodeTheme.tsx +126 -0
- package/src/coder/CodeTheme/index.ts +7 -0
- package/src/coder/CoderProvider.tsx +26 -0
- package/src/coder/README.md +1 -0
- package/src/coder/hooks/highlight.ts +182 -0
- package/src/coder/index.ts +37 -0
- package/src/coder/themes/classic.css +57 -0
- package/src/coder/themes/classic.ts +270 -0
- package/src/coder/themes/cosmo.css +64 -0
- package/src/coder/themes/cosmo.ts +264 -0
- package/src/content/AppearanceDecorator.styles.tsx +11 -0
- package/src/content/ContentDecoator.styles.tsx +180 -0
- package/src/content/ContentDecorator.tsx +17 -0
- package/src/content/GridDecorator.styles.tsx +86 -0
- package/src/content/GridDecorator.tsx +23 -0
- package/src/content/ReactContent.tsx +671 -0
- package/src/content/TODO.md +1 -0
- package/src/content/index.ts +13 -0
- package/src/kit/Loader/Loader.styles.tsx +53 -0
- package/src/kit/Loader/Loader.tsx +22 -0
- package/src/kit/TODO.md +2 -0
- package/src/kit/index.ts +1 -0
- package/src/layouts/LayoutPrimary/LayoutPrimary.styles.tsx +325 -0
- package/src/layouts/LayoutPrimary/LayoutPrimary.tsx +252 -0
- package/src/layouts/LayoutPrimary/index.ts +3 -0
- package/src/layouts/index.ts +6 -0
- package/src/pages/PageBlogHome/PageBlogHome.styles.tsx +67 -0
- package/src/pages/PageBlogHome/PageBlogHome.tsx +64 -0
- package/src/pages/PageBlogHome/index.ts +3 -0
- package/src/pages/PageBlogHome/types.ts +35 -0
- package/src/pages/PageBlogPost/PageBlogPost.styles.tsx +4 -0
- package/src/pages/PageBlogPost/PageBlogPost.tsx +9 -0
- package/src/pages/PageBlogPost/index.ts +3 -0
- package/src/pages/PageFirstSlide/PageFirstSlide.styles.tsx +134 -0
- package/src/pages/PageFirstSlide/PageFirstSlide.tsx +56 -0
- package/src/pages/PageFirstSlide/index.ts +1 -0
- package/src/pages/PageFirstSlide/types.ts +67 -0
- package/src/pages/PageHome/PageHome.styles.tsx +51 -0
- package/src/pages/PageHome/PageHome.tsx +62 -0
- package/src/pages/PageHome/index.ts +3 -0
- package/src/pages/PageHome/types.ts +79 -0
- package/src/pages/index.ts +7 -0
- package/src/system/Baseline/Baseline.styles.tsx +128 -0
- package/src/system/Baseline/Baseline.tsx +40 -0
- package/src/system/Baseline/bun.svg +1 -0
- package/src/system/Baseline/check.svg +1 -0
- package/src/system/Baseline/index.ts +1 -0
- package/src/system/Baseline/logo.svg +1 -0
- package/src/system/Baseline/node.svg +7 -0
- package/src/system/Baseline/npm.svg +5 -0
- package/src/system/Baseline/pnpm.svg +1 -0
- package/src/system/Footer/Footer.styles.tsx +213 -0
- package/src/system/Footer/Footer.tsx +105 -0
- package/src/system/Footer/index.ts +1 -0
- package/src/system/SearchButton/SearchButton.styles.tsx +89 -0
- package/src/system/SearchButton/SearchButton.tsx +118 -0
- package/src/system/SearchButton/index.ts +1 -0
- package/src/system/index.ts +3 -0
- package/src/utils/useStyle.ts +19 -0
- package/src/uxsdk/const.ts +1 -0
- package/src/uxsdk/index.ts +21 -0
- package/src/uxsdk/useUXClick.ts +21 -0
- package/src/uxsdk/useUXEvents.ts +105 -0
- package/src/uxsdk/useUXScrollDepth.ts +49 -0
- package/src/uxsdk/useUXUnreachableElementTracker.ts +100 -0
- package/src/views/HomeView/HomeView.styles.tsx +37 -0
- package/src/views/HomeView/HomeView.tsx +34 -0
- package/src/views/HomeView/index.ts +3 -0
- package/src/writer/Anchor/Anchor.styles.tsx +26 -0
- package/src/writer/Anchor/Anchor.tsx +51 -0
- package/src/writer/Anchor/index.tsx +1 -0
- package/src/writer/Badge/Badge.styles.tsx +44 -0
- package/src/writer/Badge/Badge.tsx +47 -0
- package/src/writer/Badge/index.ts +7 -0
- package/src/writer/Banner/Banner.styles.tsx +111 -0
- package/src/writer/Banner/Banner.tsx +151 -0
- package/src/writer/Banner/index.ts +1 -0
- package/src/writer/Blockquote/Blockquote.styles.tsx +20 -0
- package/src/writer/Blockquote/Blockquote.tsx +38 -0
- package/src/writer/Blockquote/index.ts +7 -0
- package/src/writer/BlogCard/BlogCard.styles.tsx +4 -0
- package/src/writer/BlogCard/BlogCard.tsx +9 -0
- package/src/writer/BlogCard/index.ts +3 -0
- package/src/writer/Breadcrumbs/Breadcrumbs.styles.ts +24 -0
- package/src/writer/Breadcrumbs/Breadcrumbs.tsx +57 -0
- package/src/writer/Breadcrumbs/index.ts +7 -0
- package/src/writer/Button/Button.styles.tsx +149 -0
- package/src/writer/Button/Button.tsx +82 -0
- package/src/writer/Button/index.ts +2 -0
- package/src/writer/Callout/Callout.styles.tsx +102 -0
- package/src/writer/Callout/Callout.tsx +166 -0
- package/src/writer/Callout/index.tsx +3 -0
- package/src/writer/Card/Card.styles.tsx +110 -0
- package/src/writer/Card/Card.tsx +94 -0
- package/src/writer/Card/index.ts +1 -0
- package/src/writer/Code/Code.styles.tsx +16 -0
- package/src/writer/Code/Code.tsx +16 -0
- package/src/writer/Code/index.ts +3 -0
- package/src/writer/ColorSchemeButton/ColorSchemeButton.tsx +191 -0
- package/src/writer/ColorSchemeButton/index.ts +1 -0
- package/src/writer/Details/Details.styles.tsx +101 -0
- package/src/writer/Details/Details.tsx +168 -0
- package/src/writer/Details/DetailsProps.tsx +34 -0
- package/src/writer/Details/index.ts +6 -0
- package/src/writer/GuideCard/GuideCard.styles.tsx +129 -0
- package/src/writer/GuideCard/GuideCard.tsx +123 -0
- package/src/writer/GuideCard/index.ts +1 -0
- package/src/writer/Heading/Heading.styles.tsx +93 -0
- package/src/writer/Heading/Heading.tsx +123 -0
- package/src/writer/Heading/index.ts +7 -0
- package/src/writer/Hr/Hr.styles.tsx +7 -0
- package/src/writer/Hr/Hr.tsx +10 -0
- package/src/writer/Hr/index.ts +3 -0
- package/src/writer/Icon/Icon.styles.tsx +15 -0
- package/src/writer/Icon/Icon.tsx +99 -0
- package/src/writer/Icon/index.ts +1 -0
- package/src/writer/IconSocial/IconSocial.tsx +107 -0
- package/src/writer/IconSocial/index.ts +1 -0
- package/src/writer/Image/Image.styles.tsx +9 -0
- package/src/writer/Image/Image.tsx +35 -0
- package/src/writer/Image/index.ts +1 -0
- package/src/writer/List/List.styles.tsx +47 -0
- package/src/writer/List/List.tsx +29 -0
- package/src/writer/List/index.ts +4 -0
- package/src/writer/NavLinks/NavLinks.styles.ts +32 -0
- package/src/writer/NavLinks/NavLinks.tsx +95 -0
- package/src/writer/NavLinks/index.ts +7 -0
- package/src/writer/Pre/Pre.styles.tsx +13 -0
- package/src/writer/Pre/Pre.tsx +14 -0
- package/src/writer/Pre/index.ts +3 -0
- package/src/writer/README.md +1 -0
- package/src/writer/Steps/Steps.styles.tsx +91 -0
- package/src/writer/Steps/Steps.tsx +75 -0
- package/src/writer/Steps/index.ts +5 -0
- package/src/writer/Table/Table.styles.tsx +100 -0
- package/src/writer/Table/Table.tsx +158 -0
- package/src/writer/Table/index.ts +3 -0
- package/src/writer/Tabs/Tabs.tsx +67 -0
- package/src/writer/Tabs/TabsAnalytics.tsx +25 -0
- package/src/writer/Tabs/TabsPrimary.styles.tsx +187 -0
- package/src/writer/Tabs/TabsPrimary.tsx +215 -0
- package/src/writer/Tabs/TabsProps.tsx +13 -0
- package/src/writer/Tabs/TabsSecondary.styles.tsx +78 -0
- package/src/writer/Tabs/TabsSecondary.tsx +176 -0
- package/src/writer/Tabs/index.ts +2 -0
- package/src/writer/Tabs/useValueChange.ts +84 -0
- package/src/writer/Text/Text.styles.tsx +66 -0
- package/src/writer/Text/Text.tsx +79 -0
- package/src/writer/Text/index.ts +3 -0
- package/src/writer/TocCard/TocCard.module.css +44 -0
- package/src/writer/TocCard/TocCard.tsx +42 -0
- package/src/writer/TocCard/index.ts +3 -0
- package/src/writer/Update/Update.styles.tsx +33 -0
- package/src/writer/Update/Update.tsx +37 -0
- package/src/writer/Update/index.ts +1 -0
- package/src/writer/VideoGuide/VideoGuide.module.css +105 -0
- package/src/writer/VideoGuide/VideoGuide.tsx +75 -0
- package/src/writer/VideoGuide/index.ts +1 -0
- package/src/writer/index.ts +53 -0
- package/system.ts +1 -0
- package/tsconfig.json +46 -0
- package/types.d.ts +52 -0
- package/uxsdk.ts +1 -0
- package/views.ts +2 -0
- package/writer.ts +1 -0
package/dist/pages.d.ts
ADDED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
|
|
4
|
+
interface BlogPostAuthor {
|
|
5
|
+
name: string;
|
|
6
|
+
avatar: string;
|
|
7
|
+
}
|
|
8
|
+
interface BlogPost {
|
|
9
|
+
id: number;
|
|
10
|
+
title: string;
|
|
11
|
+
image: string;
|
|
12
|
+
tag: string;
|
|
13
|
+
author: BlogPostAuthor;
|
|
14
|
+
date: string;
|
|
15
|
+
href: string;
|
|
16
|
+
}
|
|
17
|
+
interface BlogTab {
|
|
18
|
+
value: string;
|
|
19
|
+
label: string;
|
|
20
|
+
href?: string;
|
|
21
|
+
}
|
|
22
|
+
interface BlogPaginationLink {
|
|
23
|
+
title: string;
|
|
24
|
+
href: string;
|
|
25
|
+
}
|
|
26
|
+
interface PageBlogHomeProps {
|
|
27
|
+
posts: BlogPost[];
|
|
28
|
+
tabs: BlogTab[];
|
|
29
|
+
initialTab?: string;
|
|
30
|
+
heading?: string;
|
|
31
|
+
subheading?: string;
|
|
32
|
+
prevLink?: BlogPaginationLink;
|
|
33
|
+
nextLink?: BlogPaginationLink;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare function PageBlogHome({ posts, tabs, initialTab, heading, subheading, prevLink, nextLink, as, }: PageBlogHomeProps): React.JSX.Element;
|
|
37
|
+
|
|
38
|
+
declare function PageBlogPost(): React.JSX.Element;
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Props for the GuideCard component
|
|
42
|
+
*/
|
|
43
|
+
interface GuideCardProps {
|
|
44
|
+
/** Content to be displayed in the card body */
|
|
45
|
+
children: React__default.ReactNode;
|
|
46
|
+
/** URL the card links to */
|
|
47
|
+
href: string;
|
|
48
|
+
/** Title displayed at the top of the card */
|
|
49
|
+
title?: string;
|
|
50
|
+
/** Optional icon displayed to the left of the content */
|
|
51
|
+
icon?: React__default.ReactNode | string;
|
|
52
|
+
/** Visual style variant of the card */
|
|
53
|
+
kind?: "secondary";
|
|
54
|
+
/** Size variant of the card */
|
|
55
|
+
size?: "sm" | "md";
|
|
56
|
+
/** Additional CSS class names to apply to the card */
|
|
57
|
+
className?: string;
|
|
58
|
+
/** Additional props to pass to the link element */
|
|
59
|
+
as?: React__default.ElementType;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Props for the PageHome component.
|
|
64
|
+
*/
|
|
65
|
+
interface PageHomeProps {
|
|
66
|
+
/**
|
|
67
|
+
* Hero section content for the home page.
|
|
68
|
+
*/
|
|
69
|
+
hero?: PageHomeHero;
|
|
70
|
+
/**
|
|
71
|
+
* Sections to display on the home page.
|
|
72
|
+
*/
|
|
73
|
+
sections?: PageHomeSection[];
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* Button used in the hero section of the home page.
|
|
77
|
+
*/
|
|
78
|
+
interface PageHomeHeroButton {
|
|
79
|
+
/**
|
|
80
|
+
* The button label.
|
|
81
|
+
*/
|
|
82
|
+
title: string;
|
|
83
|
+
/**
|
|
84
|
+
* The URL the button links to.
|
|
85
|
+
*/
|
|
86
|
+
href: string;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Hero section content for the home page.
|
|
90
|
+
*/
|
|
91
|
+
interface PageHomeHero {
|
|
92
|
+
/**
|
|
93
|
+
* The main title text.
|
|
94
|
+
*/
|
|
95
|
+
title?: string;
|
|
96
|
+
/**
|
|
97
|
+
* The description text.
|
|
98
|
+
*/
|
|
99
|
+
description?: string;
|
|
100
|
+
/**
|
|
101
|
+
* The image URL for the hero section.
|
|
102
|
+
*/
|
|
103
|
+
image?: string;
|
|
104
|
+
/**
|
|
105
|
+
* The main button for the hero section.
|
|
106
|
+
*/
|
|
107
|
+
button?: PageHomeHeroButton;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Card displayed in a section on the home page. Extends GuideCardProps.
|
|
111
|
+
*/
|
|
112
|
+
interface PageHomeCard extends GuideCardProps {
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Section displayed on the home page.
|
|
116
|
+
*/
|
|
117
|
+
interface PageHomeSection {
|
|
118
|
+
/**
|
|
119
|
+
* The section title.
|
|
120
|
+
*/
|
|
121
|
+
title?: string;
|
|
122
|
+
/**
|
|
123
|
+
* Cards to display in the section.
|
|
124
|
+
*/
|
|
125
|
+
cards?: PageHomeCard[];
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
declare function PageHome(props: PageHomeProps): React.JSX.Element;
|
|
129
|
+
|
|
130
|
+
interface PageFirstSlideProps {
|
|
131
|
+
/**
|
|
132
|
+
* The main content for the slide.
|
|
133
|
+
*/
|
|
134
|
+
content?: PageFirstSlideContent;
|
|
135
|
+
/**
|
|
136
|
+
* Optional React node to display on the right side.
|
|
137
|
+
*/
|
|
138
|
+
rightContent?: React.ReactNode;
|
|
139
|
+
}
|
|
140
|
+
interface PageFirstSlideButton {
|
|
141
|
+
title: string;
|
|
142
|
+
/**
|
|
143
|
+
* The URL the button links to.
|
|
144
|
+
*/
|
|
145
|
+
href: string;
|
|
146
|
+
/**
|
|
147
|
+
* The visual style of the button.
|
|
148
|
+
*/
|
|
149
|
+
kind?: "primary" | "secondary";
|
|
150
|
+
/**
|
|
151
|
+
* Whether the button is disabled.
|
|
152
|
+
*/
|
|
153
|
+
disabled?: boolean;
|
|
154
|
+
}
|
|
155
|
+
interface PageFirstSlideContent {
|
|
156
|
+
/**
|
|
157
|
+
* The main title text.
|
|
158
|
+
*/
|
|
159
|
+
title?: string;
|
|
160
|
+
/**
|
|
161
|
+
* The description text.
|
|
162
|
+
*/
|
|
163
|
+
description?: string;
|
|
164
|
+
/**
|
|
165
|
+
* The primary action button.
|
|
166
|
+
*/
|
|
167
|
+
primaryButton?: PageFirstSlideButton;
|
|
168
|
+
/**
|
|
169
|
+
* The secondary action button.
|
|
170
|
+
*/
|
|
171
|
+
secondaryButton?: PageFirstSlideButton;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
declare function PageFirstSlide(props: PageFirstSlideProps): React.JSX.Element;
|
|
175
|
+
|
|
176
|
+
export { PageBlogHome, PageBlogPost, PageFirstSlide, PageHome };
|
package/dist/pages.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export{P as PageBlogHome,b as PageFirstSlide,a as PageHome}from"./PageFirstSlide-BDNmCTiJ.js";import*as e from"react";import"./_rollupPluginBabelHelpers-CvhQFv1t.js";import"./VideoGuide-DBY-EyxG.js";import"./Icon--77MqplU.js";import"./Button-BLA2ghHZ.js";import"./useUXEvents-CJtgGV4R.js";import"openux-js";import"./TabsAnalytics-B_JYpawG.js";import"radix-ui";import"lucide-react";function o(){return e.createElement("div",{className:"pqkuduk"},"Blog Post")}export{o as PageBlogPost};
|
|
2
|
+
//# sourceMappingURL=pages.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pages.js","sources":["../src/pages/PageBlogPost/PageBlogPost.tsx","../src/pages/PageBlogPost/PageBlogPost.styles.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as cn from \"./PageBlogPost.styles\"\n\nexport function PageBlogPost() {\n return <div className={cn.PageBlogPost}>\n Blog Post\n </div>\n}","import { css } from \"@linaria/core\"\n\nexport const PageBlogPost = css`\n `"],"names":["PageBlogPost","React","className"],"mappings":"sYAIgBA,IACZ,OAAOC,uBAAKC,UCHS,uBDMzB"}
|
package/dist/system.d.ts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
|
|
4
|
+
interface BaselineTool {
|
|
5
|
+
tool: 'bun' | 'node' | 'npm' | 'pnpm' | string;
|
|
6
|
+
supported: boolean;
|
|
7
|
+
label?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
interface BaselineProps extends React.HTMLAttributes<HTMLDetailsElement> {
|
|
10
|
+
title: string;
|
|
11
|
+
toolGroups: BaselineTool[][];
|
|
12
|
+
}
|
|
13
|
+
declare function Baseline({ title, toolGroups, ...props }: BaselineProps): React.JSX.Element;
|
|
14
|
+
|
|
15
|
+
interface FooterLinkItemsProps {
|
|
16
|
+
label: string;
|
|
17
|
+
href: string;
|
|
18
|
+
}
|
|
19
|
+
interface FooterProps {
|
|
20
|
+
footnote: React__default.ReactNode;
|
|
21
|
+
kind?: "minimal";
|
|
22
|
+
logo?: React__default.ReactNode;
|
|
23
|
+
socials?: {
|
|
24
|
+
logo: React__default.ReactNode;
|
|
25
|
+
href: string;
|
|
26
|
+
}[];
|
|
27
|
+
links?: {
|
|
28
|
+
header: string;
|
|
29
|
+
items?: FooterLinkItemsProps[];
|
|
30
|
+
}[] | FooterLinkItemsProps[];
|
|
31
|
+
}
|
|
32
|
+
declare function Footer(props: FooterProps): React__default.JSX.Element;
|
|
33
|
+
declare namespace Footer {
|
|
34
|
+
var Minimal: (props: FooterProps) => React__default.JSX.Element;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
interface SearchButtonProps {
|
|
38
|
+
onClick?: () => void;
|
|
39
|
+
placeholder?: string;
|
|
40
|
+
shortcutKeys?: string[];
|
|
41
|
+
fullWidth?: boolean;
|
|
42
|
+
}
|
|
43
|
+
declare function SearchButton({ shortcutKeys, ...props }: SearchButtonProps): React__default.JSX.Element;
|
|
44
|
+
|
|
45
|
+
export { Baseline, Footer, SearchButton };
|
package/dist/system.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as e}from"./Icon--77MqplU.js";import*as t from"react";import n,{useEffect as r,useRef as a}from"react";import{B as o}from"./Button-BLA2ghHZ.js";import{a as l}from"./_rollupPluginBabelHelpers-CvhQFv1t.js";function i(n){var r=n.title,a=n.toolGroups,o=e(n,["title","toolGroups"]);return t.createElement("details",Object.assign({className:"bigwo3e"},o),t.createElement("summary",null,t.createElement("span",{part:"icon"}),t.createElement("div",{part:"title"},r),t.createElement("div",{part:"compatibility"},a.map(function(e,n){return t.createElement("span",{part:"tools",key:n},e.map(function(e,n){var r;return t.createElement("span",{key:e.tool+(null!==(r=e.label)&&void 0!==r?r:"")+n,"data-tool":e.tool,"data-supported":!!e.supported||void 0},e.label?e.label:null)}))}))))}var c="f30yyk8";function d(e){var t,r,a,o;return"minimal"===e.kind?n.createElement(d.Minimal,Object.assign({},e)):n.createElement("footer",{className:c},n.createElement("div",{part:"container"},n.createElement("div",{part:"content"},e.logo&&n.createElement("div",{part:"first-column"},e.logo),(null===(t=e.links)||void 0===t?void 0:t.length)&&n.createElement("div",{part:"columns","data-cols":null===(r=e.links)||void 0===r?void 0:r.length},null===(a=e.links)||void 0===a?void 0:a.map(function(e,t){var r;return n.createElement("div",{part:"col",key:"".concat(e.header,"-").concat(t)},n.createElement("div",{part:"col-items"},n.createElement("p",null,e.header),null===(r=e.items)||void 0===r?void 0:r.map(function(e){return n.createElement("a",{key:"".concat(e.label,"-").concat(t),target:"_blank",href:e.href},e.label)})))})),n.createElement("div",{part:"social-links"},null===(o=e.socials)||void 0===o?void 0:o.map(function(e,t){return n.createElement("a",{target:"_blank",href:e.href,key:"".concat(e.href,"-").concat(t)},e.logo)}))),e.footnote&&n.createElement("hr",null),n.createElement("div",{part:"footnote"},e.footnote)))}d.Minimal=function(e){var t,r,a,l;return n.createElement("footer",{className:c,"data-kind":"minimal"},n.createElement("div",{part:"container"},n.createElement("div",{part:"content"},(null===(t=e.links)||void 0===t?void 0:t.length)&&n.createElement("div",{part:"columns","data-cols":null===(r=e.links)||void 0===r?void 0:r.length},n.createElement("div",{part:"col"},n.createElement("div",{part:"col-items"},null===(a=e.links)||void 0===a?void 0:a.map(function(e,t){return n.createElement(o,{key:"".concat(e.label,"-").concat(t),kind:"tertiary",href:e.href},e.label)})))),n.createElement("div",{part:"social-links"},null===(l=e.socials)||void 0===l?void 0:l.map(function(e,t){return n.createElement(o,{key:"".concat(e.href,"-").concat(t),kind:"tertiary",href:e.href,icon:e.logo})})))))};function u(t){var o=t.shortcutKeys,i=void 0===o?["⌘","K"]:o,c=e(t,["shortcutKeys"]);return function(e,t){var n=a(t);r(function(){n.current=t},[t]),r(function(){if(!window.__UNSAFE_xyd_search_button_inited){var t=function(t){if(1!==e.length){if(2===e.length){var r=l(e,2),a=r[0],o=r[1],i=t.key.toLowerCase();("⌘"===a&&t.metaKey||"Ctrl"===a&&t.ctrlKey)&&i===o.toLowerCase()&&(t.preventDefault(),n.current())}}else t.key.toLowerCase()===e[0].toLowerCase()&&(t.preventDefault(),n.current())};return window.addEventListener("keydown",t,{capture:!0}),window.addEventListener("keyup",t,{capture:!0}),function(){window.removeEventListener("keydown",t,{capture:!0}),window.removeEventListener("keyup",t,{capture:!0})}}},[])}(i,function(){var e;return null===(e=c.onClick)||void 0===e?void 0:e.call(c)}),r(function(){return window.__UNSAFE_xyd_search_button_inited=!0,function(){window.__UNSAFE_xyd_search_button_inited=!1}},[]),n.createElement("xyd-search-button",{className:"s1f8k5y3","aria-label":"Search",onClick:c.onClick,"data-fullWidth":c.fullWidth},n.createElement("span",{part:"container"},n.createElement("svg",{width:20,height:20,part:"icon",viewBox:"0 0 20 20"},n.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"})),n.createElement("span",{part:"placeholder"},c.placeholder||"Search")),i.length>0&&n.createElement("span",{part:"keys"},i.map(function(e,t){return n.createElement("kbd",{key:"".concat(e,"-").concat(t),part:"key"},e)})))}export{i as Baseline,d as Footer,u as SearchButton};
|
|
2
|
+
//# sourceMappingURL=system.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"system.js","sources":["../src/system/Baseline/Baseline.tsx","../src/system/Baseline/Baseline.styles.tsx","../src/system/Footer/Footer.styles.tsx","../src/system/Footer/Footer.tsx","../src/system/SearchButton/SearchButton.tsx","../src/system/SearchButton/SearchButton.styles.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as cn from './Baseline.styles';\n\nexport interface BaselineTool {\n tool: 'bun' | 'node' | 'npm' | 'pnpm' | string\n supported: boolean;\n label?: React.ReactNode;\n}\n\nexport interface BaselineProps extends React.HTMLAttributes<HTMLDetailsElement> {\n title: string;\n toolGroups: BaselineTool[][];\n}\n\nexport function Baseline({ title, toolGroups, ...props }: BaselineProps) {\n return (\n <details className={cn.BaselineHost} {...props}>\n <summary>\n <span part=\"icon\" />\n <div part=\"title\">{title}</div>\n <div part=\"compatibility\">\n {toolGroups.map((group, i) => (\n <span part=\"tools\" key={i}>\n {group.map((tool, j) => (\n <span\n key={tool.tool + (tool.label ?? '') + j}\n data-tool={tool.tool}\n data-supported={tool.supported ? true : undefined}\n >\n {tool.label ? tool.label : null}\n </span>\n ))}\n </span>\n ))}\n </div>\n </summary>\n </details>\n );\n}","\nimport { css } from \"@linaria/core\";\n\nimport checkUrl from \"./check.svg\"\nimport bunUrl from \"./bun.svg\"\nimport logoUrl from \"./logo.svg\"\nimport pnpmUrl from \"./pnpm.svg\"\nimport nodeUrl from \"./node.svg\"\nimport npmUrl from \"./npm.svg\"\n\nexport const BaselineHost = css`\n --baseline-logo-bun: url(${bunUrl});\n --baseline-logo-node: url(${nodeUrl});\n --baseline-logo-npm: url(${npmUrl});\n\n --baseline-high-bg: #e6f4ea;\n --baseline-high-engine-bg: #ceead6;\n --baseline-high-img: url(${logoUrl});\n --baseline-high-check: #099949;\n\n --baseline-bg: var(--baseline-high-bg);\n --baseline-engine-bg: var(--baseline-high-engine-bg);\n --baseline-img: var(--baseline-high-img);\n --baseline-check: var(--baseline-high-check);\n\n --baseline-cross: var(--baseline-limited-cross);\n --feedback-link-icon: var(--icon-primary);\n background: var(--baseline-bg);\n border-radius: .25rem;\n margin: 1rem 0;\n padding-left: 3.8125rem;\n\n summary {\n --chevron-size: 0.6875rem;\n --chevron-padding-left: 0.75rem;\n --chevron-padding-right: 1.25rem;\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-wrap: wrap;\n gap: .5rem;\n justify-content: space-between;\n padding: 1rem 0;\n padding-right: calc(var(--chevron-padding-left) + var(--chevron-size) + var(--chevron-padding-right));\n position: relative;\n }\n\n [part=\"icon\"] {\n --width: 2.3125rem;\n background-image: var(--baseline-img);\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: contain;\n display: block;\n height: 2.25rem;\n left: calc(-.5rem - var(--width));\n position: absolute;\n top: 1rem;\n width: var(--width);\n }\n\n [part=\"title\"] {\n font-size: 1rem;\n font-weight: 600;\n letter-spacing: 0;\n line-height: 1.5;\n margin: 0;\n padding: .375rem 0;\n }\n\n [part=\"compatibility\"] {\n display: flex;\n flex-wrap: wrap;\n gap: .5rem;\n }\n\n [part=\"tools\"] {\n background: var(--baseline-engine-bg);\n border-radius: 2rem;\n display: flex;\n flex-wrap: wrap;\n gap: .5rem;\n padding: .5rem .625rem;\n\n [data-tool] {\n display: flex;\n --baseline-tool-image: none;\n }\n [data-tool=\"bun\"] {\n --baseline-tool-image: var(--baseline-logo-bun);\n }\n [data-tool=\"node\"] {\n --baseline-tool-image: var(--baseline-logo-node);\n }\n [data-tool=\"npm\"] {\n --baseline-tool-image: var(--baseline-logo-npm);\n }\n [data-tool=\"pnpm\"] {\n --baseline-tool-image: url(${pnpmUrl});\n }\n\n [data-tool]::before {\n background-repeat: no-repeat;\n background-size: contain;\n content: \"\";\n display: block;\n height: 1.25rem;\n width: 1.25rem;\n background-image: var(--baseline-tool-image);\n }\n\n [data-tool]::after {\n background-color: var(--baseline-check);\n mask-image: url(${checkUrl});\n -webkit-mask-image: url(${checkUrl});\n\n content: \"\";\n display: block;\n height: 1.25rem;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: contain;\n mask-size: contain;\n width: 1rem;\n }\n }\n\n`;","import { css } from \"@linaria/core\";\n\nexport const Footer = css`\n /* transform: translateY(-100%); */\n\n border-top: 1px solid var(--dark32);\n display: flex;\n align-items: center;\n flex-direction: column;\n\n p {\n color: var(--text-primary);\n font-weight: bold;\n }\n hr {\n background: var(--dark32);\n width: 100%;\n height: 1px;\n }\n\n a {\n color: var(--dark48);\n font-weight: var(--xyd-font-weight-medium);\n\n &:hover {\n color: var(--dark80);\n }\n }\n\n [part=\"container\"] {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 24px;\n justify-content: space-between;\n max-width: 1050px;\n width: 100%;\n\n padding: 100px 25px\n }\n &[data-kind=\"minimal\"] [part=\"container\"] {\n max-width: 100%;\n padding: 20px;\n }\n\n [part=\"content\"] {\n display: flex;\n flex-direction: row;\n gap: 32px;\n justify-content: space-between;\n width: 100%;\n\n @media (max-width: 768px) {\n flex-direction: column;\n gap: 24px;\n }\n }\n\n [part=\"first-column\"] {\n display: flex;\n height: 24px;\n\n img, svg {\n height: 28px;\n width: auto;\n }\n\n @media (min-width: 1024px) {\n min-width: 140px;\n }\n\n @media (max-width: 768px) {\n align-self: flex-start;\n }\n }\n\n [part=\"columns\"] {\n display: grid;\n gap: 32px;\n grid-template-columns: repeat(auto-fill, minmax(0, 1fr));\n flex: 1 1 0%;\n\n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 24px;\n width: 100%;\n }\n\n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n gap: 20px;\n }\n\n &[data-cols=\"1\"] {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n &[data-cols=\"2\"] {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n &[data-cols=\"3\"] {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n \n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n &[data-cols=\"4\"] {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n \n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n &[data-cols=\"5\"] {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n \n @media (max-width: 768px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n \n @media (max-width: 680px) {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n }\n &[data-kind=\"minimal\"] [part=\"columns\"] {\n display: flex;\n }\n\n [part=\"col\"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n white-space: nowrap;\n gap: 16px;\n\n @media (max-width: 768px) {\n align-items: flex-start;\n white-space: normal;\n }\n }\n\n [part=\"col-items\"] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n align-items: flex-start;\n\n @media (max-width: 768px) {\n align-items: flex-start;\n }\n }\n &[data-kind=\"minimal\"] [part=\"col-items\"] {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n [part=\"social-links\"] {\n display: flex;\n gap: 16px;\n justify-content: flex-end;\n flex-wrap: wrap;\n max-width: 492px;\n min-width: 140px;\n\n @media (max-width: 768px) {\n justify-content: flex-start;\n max-width: 100%;\n min-width: auto;\n }\n\n svg {\n width: 24px;\n height: 24px;\n\n color: var(--dark48);\n fill: var(--dark48);\n\n &:hover {\n color: var(--dak80);\n fill: var(--dak80);\n }\n }\n }\n\n [part=\"footnote\"] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media (max-width: 768px) {\n flex-direction: column;\n gap: 16px;\n align-items: flex-start;\n }\n }\n`;","import React from \"react\";\n\nimport { Button } from \"../../writer/Button\"\nimport * as cn from \"./Footer.styles\";\n\nexport interface FooterLinkItemsProps {\n label: string;\n href: string;\n}\n\nexport interface FooterProps {\n footnote: React.ReactNode;\n\n kind?: \"minimal\"\n\n logo?: React.ReactNode;\n\n socials?: {\n logo: React.ReactNode;\n href: string\n }[]\n\n links?: {\n header: string;\n items?: FooterLinkItemsProps[]\n }[] | FooterLinkItemsProps[]\n}\n\nexport function Footer(props: FooterProps) {\n if (props.kind === \"minimal\") {\n return <Footer.Minimal {...props} />\n }\n\n return <footer className={cn.Footer}>\n <div part=\"container\">\n <div part=\"content\">\n {\n props.logo && <div part=\"first-column\">\n {props.logo}\n </div>\n }\n\n {props.links?.length && <div part=\"columns\" data-cols={props.links?.length}>\n {props.links?.map((link, index) => (\n <div part=\"col\" key={`${link.header}-${index}`}>\n <div part=\"col-items\">\n <p>{link.header}</p>\n {link.items?.map((item) => (\n <a key={`${item.label}-${index}`} target=\"_blank\" href={item.href}>{item.label}</a>\n ))}\n </div>\n </div>\n ))}\n </div>}\n\n\n <div part=\"social-links\">\n {props.socials?.map((social, index) => (\n <a target=\"_blank\" href={social.href} key={`${social.href}-${index}`}>{social.logo}</a>\n ))}\n </div>\n </div>\n\n {props.footnote && <hr />}\n\n <div part=\"footnote\">\n {props.footnote}\n </div>\n </div>\n </footer>\n}\n\nFooter.Minimal = function MinimalFooter(props: FooterProps) {\n return <footer className={cn.Footer} data-kind=\"minimal\">\n <div part=\"container\">\n <div part=\"content\">\n {\n props.links?.length && <div part=\"columns\" data-cols={props.links?.length}>\n <div part=\"col\">\n <div part=\"col-items\">\n {props.links?.map((item, index) => (\n <Button\n key={`${item.label}-${index}`} kind=\"tertiary\" href={item.href}>\n {item.label}\n </Button>\n ))}\n </div>\n </div>\n </div>\n }\n\n <div part=\"social-links\">\n {props.socials?.map((social, index) => (\n <Button\n key={`${social.href}-${index}`}\n kind=\"tertiary\"\n href={social.href}\n icon={social.logo}\n />\n ))}\n </div>\n </div>\n </div>\n </footer>\n}","import React, { useEffect, useRef } from 'react';\n\nimport * as cn from \"./SearchButton.styles\";\n\ninterface SearchButtonProps {\n onClick?: () => void;\n placeholder?: string;\n shortcutKeys?: string[];\n fullWidth?: boolean;\n}\n\nexport function SearchButton({\n shortcutKeys = ['⌘', 'K'],\n ...props\n}: SearchButtonProps) {\n useShortcuts(shortcutKeys, () => props.onClick?.());\n\n useEffect(() => {\n // @ts-ignore - !!! FIX IN THE FUTURE !!! its a fix for loading virtual-component:Search twice? original and from plugin - check if exists on prod\n window.__UNSAFE_xyd_search_button_inited = true\n\n return () => {\n // @ts-ignore\n window.__UNSAFE_xyd_search_button_inited = false\n }\n }, [])\n\n return (\n <xyd-search-button\n className={cn.SearchButton}\n aria-label=\"Search\"\n onClick={props.onClick}\n data-fullWidth={props.fullWidth}\n >\n <span part=\"container\">\n <svg\n width={20}\n height={20}\n part=\"icon\"\n viewBox=\"0 0 20 20\"\n >\n <path\n d=\"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z\"\n stroke=\"currentColor\"\n fill=\"none\"\n fillRule=\"evenodd\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n <span part=\"placeholder\">{props.placeholder || \"Search\"}</span>\n </span>\n\n {\n shortcutKeys.length > 0 && (\n <span part=\"keys\">\n {shortcutKeys.map((key, index) => (\n <kbd key={`${key}-${index}`} part=\"key\">{key}</kbd>\n ))}\n </span>\n )\n }\n </xyd-search-button>\n )\n}\n\nfunction useShortcuts(shortcutKeys: string[], onTrigger: () => void): void {\n // Keep latest handler reference to avoid stale closures\n const savedHandler = useRef(onTrigger);\n\n useEffect(() => {\n savedHandler.current = onTrigger;\n }, [onTrigger]);\n\n useEffect(() => {\n // @ts-ignore\n if (window.__UNSAFE_xyd_search_button_inited) {\n return\n }\n\n const listener = (event: KeyboardEvent) => {\n // For single key shortcuts\n if (shortcutKeys.length === 1) {\n if (event.key.toLowerCase() === shortcutKeys[0].toLowerCase()) {\n event.preventDefault();\n\n savedHandler.current();\n }\n return;\n }\n\n // For modifier combinations\n if (shortcutKeys.length === 2) {\n const [modifier, key] = shortcutKeys;\n const pressedKey = event.key.toLowerCase();\n\n const isModifierMatch =\n (modifier === '⌘' && event.metaKey) ||\n (modifier === 'Ctrl' && event.ctrlKey);\n\n if (isModifierMatch && pressedKey === key.toLowerCase()) {\n event.preventDefault();\n\n savedHandler.current();\n }\n }\n };\n\n // Use capture phase and listen to both keydown and keyup\n window.addEventListener('keydown', listener, { capture: true });\n window.addEventListener('keyup', listener, { capture: true });\n\n return () => {\n window.removeEventListener('keydown', listener, { capture: true });\n window.removeEventListener('keyup', listener, { capture: true });\n };\n }, []);\n}","import { css } from \"@linaria/core\";\n\nexport const SearchButton = css`\n @layer defaults {\n background-color: transparent;\n border-radius: var(--xyd-border-radius-large);\n border: 1px solid var(--dark32);\n color: var(--text-primary);\n background: var(--dark16);\n font-size: var(--xyd-font-size-small);\n font-weight: var(--xyd-font-weight-semibold);\n height: 36px;\n justify-content: space-between;\n display: flex;\n align-items: center;\n flex: 1;\n\n padding: 0 8px;\n margin: 12px 0 0;\n user-select: none;\n width: 100%;\n transition: border-color .15s ease;\n\n max-width: var(--xyd-search-width, 300px);\n margin: 0;\n\n cursor: pointer;\n\n &[data-fullWidth] {\n max-width: 100%;\n }\n\n &:hover {\n background: var(--dark16);\n box-shadow: none;\n color: var(--dark48);\n outline: none;\n\n box-shadow: none;\n border-color: var(--dark48);\n }\n \n [part=\"container\"] {\n align-items: center;\n display: flex;\n }\n\n [part=\"placeholder\"] {\n display: block !important;\n font-size: var(--xyd-font-size-small);\n color: var(--dark48);\n font-weight: var(--xyd-font-weight-normal);\n }\n\n [part=\"icon\"] {\n stroke-width: 1.4;\n color: var(--dark48) !important;\n height: 15px;\n transition: color .15s var(--cubic-enter);\n }\n \n\n [part=\"keys\"] {\n display: flex;\n gap: 4px;\n min-width: auto;\n }\n\n [part=\"key\"] {\n align-items: center;\n background: var(--dark16);\n border-radius: var(--xyd-border-radius-small);\n box-shadow: none;\n color: var(--dark48);\n display: flex;\n height: 18px;\n line-height: 18px;\n justify-content: center;\n font-size: 12px;\n letter-spacing: 1px;\n position: relative;\n padding: 0;\n margin: 0;\n border: 0px;\n top: 0;\n width: 20px;\n }\n }\n`\n"],"names":["Baseline","_a","title","toolGroups","props","__rest","React","className","createElement","part","map","group","i","key","tool","j","label","supported","undefined","Footer","kind","Minimal","Object","assign","cn","logo","links","length","_b","_c","link","index","concat","header","items","item","target","href","socials","_d","social","footnote","Button","icon","SearchButton","_a$shortcutKeys","shortcutKeys","onTrigger","savedHandler","useRef","useEffect","current","window","__UNSAFE_xyd_search_button_inited","listener","event","_shortcutKeys","_slicedToArray","modifier","pressedKey","toLowerCase","metaKey","ctrlKey","preventDefault","addEventListener","capture","removeEventListener","useShortcuts","onClick","call","fullWidth","width","height","viewBox","d","stroke","fill","fillRule","strokeLinecap","strokeLinejoin","placeholder"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useUXClick-DK3cTAMR.js","sources":["../src/uxsdk/useUXClick.ts"],"sourcesContent":["import React, {useState} from \"react\";\n\nexport function useUXClick(\n openEvent: (data: any) => void,\n closeEvent: (data: any) => void,\n getData: () => any\n) {\n const [open, setOpen] = useState(false);\n\n return (event: React.MouseEvent) => {\n const newOpen = !open;\n setOpen(newOpen);\n\n const data = getData();\n if (newOpen) {\n openEvent(data);\n } else {\n closeEvent(data);\n }\n };\n}\n"],"names":["useUXClick","openEvent","closeEvent","getData","_useState","useState","_useState2","_slicedToArray","open","setOpen","event","newOpen","data"],"mappings":"sGAEgBA,EACZC,EACAC,EACAC,GAEA,IAAAC,EAAwBC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAAhCI,EAAIF,EAAA,GAAEG,EAAOH,EAAA,GAEpB,OAAO,SAACI,GACJ,IAAMC,GAAWH,EACjBC,EAAQE,GAER,IAAMC,EAAOT,IACTQ,EACAV,EAAUW,GAEVV,EAAWU,EAEnB,CACJ"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useUXClick-DO6qBcRy.js","sources":["../src/uxsdk/useUXClick.ts"],"sourcesContent":["import React, {useState} from \"react\";\n\nexport function useUXClick(\n openEvent: (data: any) => void,\n closeEvent: (data: any) => void,\n getData: () => any\n) {\n const [open, setOpen] = useState(false);\n\n return (event: React.MouseEvent) => {\n const newOpen = !open;\n setOpen(newOpen);\n\n const data = getData();\n if (newOpen) {\n openEvent(data);\n } else {\n closeEvent(data);\n }\n };\n}\n"],"names":["useUXClick","openEvent","closeEvent","getData","_useState","useState","_useState2","_slicedToArray","open","setOpen","event","newOpen","data"],"mappings":"sGAEgBA,EACZC,EACAC,EACAC,GAEA,IAAAC,EAAwBC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAAhCI,EAAIF,EAAA,GAAEG,EAAOH,EAAA,GAEpB,OAAO,SAACI,GACJ,IAAMC,GAAWH,EACjBC,EAAQE,GAER,IAAMC,EAAOT,IACTQ,EACAV,EAAUW,GAEVV,EAAWU,EAEnB,CACJ"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useUXClick-NwpsiuK9.js","sources":["../src/uxsdk/useUXClick.ts"],"sourcesContent":["import React, {useState} from \"react\";\n\nexport function useUXClick(\n openEvent: (data: any) => void,\n closeEvent: (data: any) => void,\n getData: () => any\n) {\n const [open, setOpen] = useState(false);\n\n return (event: React.MouseEvent) => {\n const newOpen = !open;\n setOpen(newOpen);\n\n const data = getData();\n if (newOpen) {\n openEvent(data);\n } else {\n closeEvent(data);\n }\n };\n}\n"],"names":["useUXClick","openEvent","closeEvent","getData","_useState","useState","_useState2","_slicedToArray","open","setOpen","event","newOpen","data"],"mappings":"sGAEgBA,EACZC,EACAC,EACAC,GAEA,IAAAC,EAAwBC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAAhCI,EAAIF,EAAA,GAAEG,EAAOH,EAAA,GAEpB,OAAO,SAACI,GACJ,IAAMC,GAAWH,EACjBC,EAAQE,GAER,IAAMC,EAAOT,IACTQ,EACAV,EAAUW,GAEVV,EAAWU,EAEnB,CACJ"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{defineEvents as e}from"openux-js";var a="components.tabs.change",n=e(function(e){var a=e.CodeSample,n=e.Framework;return{docs:{code:{example_change:function(e){var a=e.example;return Object.assign(Object.assign({},t({Framework:n})),{example:a})},tab_change:function(e){var t=e.tab;return Object.assign(Object.assign({},r({CodeSample:a,Framework:n})),{tab:t})},copy:function(e){var t=e.code;return Object.assign(Object.assign({},r({CodeSample:a,Framework:n})),{code:(t||"").slice(0,100)+"..."})},scroll_100:function(){return Object.assign({},r({CodeSample:a,Framework:n}))},scroll_depth:function(e){var t=e.depth;return Object.assign(Object.assign({},r({CodeSample:a,Framework:n})),{depth:t})}},details:{open:function(e){var a=e.label;return Object.assign(Object.assign({},t({Framework:n})),{label:a})},close:function(e){var a=e.label;return Object.assign(Object.assign({},t({Framework:n})),{label:a})}},anchor:{click:function(e){var a=e.id;return Object.assign(Object.assign({},t({Framework:n})),{id:a})}}}}});function r(e){var a=e.CodeSample,n=e.Framework;return Object.assign(Object.assign({},t({Framework:n})),{tab:null==a?void 0:a.tab,example:null==a?void 0:a.example})}function t(e){var a=e.Framework;return{location:null==a?void 0:a.location}}export{a as E,n as u};
|
|
2
|
+
//# sourceMappingURL=useUXEvents-CJtgGV4R.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useUXEvents-CJtgGV4R.js","sources":["../src/uxsdk/const.ts","../src/uxsdk/useUXEvents.ts"],"sourcesContent":["export const EVENT_COMPONENT_TAB_CHANGE = \"components.tabs.change\"\n","import {defineEvents} from 'openux-js'\n\ninterface NodeCodeSample {\n tab?: string\n example?: string\n code?: string\n}\n\ninterface NodeFramework {\n location: string\n uniformRegion?: string\n}\n\ninterface AnalyticsNodes {\n CodeSample: NodeCodeSample\n Framework: NodeFramework\n}\n\n// TODO: in the future + maybe better API\n// TODO: how to share nodes between packages\n// TODO: node abstraction?\n// TODO: merge abstraction?\nexport const useUXEvents = defineEvents(({CodeSample, Framework}: AnalyticsNodes) => ({\n docs: {\n code: {\n example_change({example}: { example: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n example: example,\n }\n },\n tab_change({tab}: { tab: string }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n tab: tab,\n }\n },\n copy({code}: { code: string }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n code: (code || \"\").slice(0, 100) + \"...\",\n }\n },\n scroll_100() {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n }\n },\n scroll_depth({depth}: { depth: number }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n depth,\n }\n },\n },\n\n details: {\n open({label}: { label: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n label: label,\n }\n },\n close({label}: { label: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n label: label,\n }\n }\n },\n\n anchor: {\n click({id}: { id: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n id: id,\n }\n }\n }\n }\n}))\n\nfunction commonCodeSampleProps({\n CodeSample,\n Framework\n }: {\n CodeSample: NodeCodeSample | undefined\n Framework: NodeFramework | undefined\n}) {\n return {\n ...commonFrameworkProps({Framework}),\n tab: CodeSample?.tab!,\n example: CodeSample?.example!,\n }\n}\n\nfunction commonFrameworkProps({\n Framework\n }: {\n Framework: NodeFramework | undefined\n}) {\n return {\n location: Framework?.location!,\n }\n}\n"],"names":["EVENT_COMPONENT_TAB_CHANGE","useUXEvents","defineEvents","_ref","CodeSample","Framework","docs","code","example_change","_ref2","example","Object","assign","commonFrameworkProps","tab_change","_ref3","tab","commonCodeSampleProps","copy","_ref4","slice","scroll_100","scroll_depth","_ref5","depth","details","open","_ref6","label","close","_ref7","anchor","click","_ref8","id","_ref9","_ref0","location"],"mappings":"yCAAO,IAAMA,EAA6B,yBCsB7BC,EAAcC,EAAa,SAAAC,GAAA,IAAEC,EAAUD,EAAVC,WAAYC,EAASF,EAATE,UAAS,MAAuB,CAClFC,KAAM,CACFC,KAAM,CACFC,eAAc,SAAAC,GAA+B,IAA7BC,EAAOD,EAAPC,QACZ,OAAAC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCK,QAASA,GAEjB,EACAI,WAAU,SAAAC,GAAuB,IAArBC,EAAGD,EAAHC,IACR,OAAAL,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDW,IAAKA,GAEb,EACAE,KAAI,SAAAC,GAAyB,IAAvBZ,EAAIY,EAAJZ,KACF,OAAAI,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDE,MAAOA,GAAQ,IAAIa,MAAM,EAAG,KAAO,OAE3C,EACAC,WAAU,WACN,OAAAV,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,IAE9C,EACAiB,aAAY,SAAAC,GAA2B,IAAzBC,EAAKD,EAALC,MACV,OAAAb,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDmB,MAAAA,GAER,GAGJC,QAAS,CACLC,KAAI,SAAAC,GAA2B,IAAzBC,EAAKD,EAALC,MACF,OAAAjB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCuB,MAAOA,GAEf,EACAC,MAAK,SAAAC,GAA2B,IAAzBF,EAAKE,EAALF,MACH,OAAAjB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCuB,MAAOA,GAEf,GAGJG,OAAQ,CACJC,MAAK,SAAAC,GAAqB,IAAnBC,EAAED,EAAFC,GACH,OAAAvB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpC6B,GAAIA,GAEZ,IAGX,GAED,SAASjB,EAAqBkB,GAM7B,IALkC/B,EAAU+B,EAAV/B,WACAC,EAAS8B,EAAT9B,UAK/B,OAAAM,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCW,IAAKZ,aAAU,EAAVA,EAAYY,IACjBN,QAASN,aAAU,EAAVA,EAAYM,SAE7B,CAEA,SAASG,EAAoBuB,GAI5B,IAHiC/B,EAAS+B,EAAT/B,UAI9B,MAAO,CACHgC,SAAUhC,aAAS,EAATA,EAAWgC,SAE7B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{defineEvents as e}from"openux-js";var a="components.tabs.change",n=e(function(e){var a=e.CodeSample,n=e.Framework;return{docs:{code:{example_change:function(e){var a=e.example;return Object.assign(Object.assign({},t({Framework:n})),{example:a})},tab_change:function(e){var t=e.tab;return Object.assign(Object.assign({},r({CodeSample:a,Framework:n})),{tab:t})},copy:function(e){var t=e.code;return Object.assign(Object.assign({},r({CodeSample:a,Framework:n})),{code:(t||"").slice(0,100)+"..."})},scroll_100:function(){return Object.assign({},r({CodeSample:a,Framework:n}))},scroll_depth:function(e){var t=e.depth;return Object.assign(Object.assign({},r({CodeSample:a,Framework:n})),{depth:t})}},details:{open:function(e){var a=e.label;return Object.assign(Object.assign({},t({Framework:n})),{label:a})},close:function(e){var a=e.label;return Object.assign(Object.assign({},t({Framework:n})),{label:a})}},anchor:{click:function(e){var a=e.id;return Object.assign(Object.assign({},t({Framework:n})),{id:a})}}}}});function r(e){var a=e.CodeSample,n=e.Framework;return Object.assign(Object.assign({},t({Framework:n})),{tab:null==a?void 0:a.tab,example:null==a?void 0:a.example})}function t(e){var a=e.Framework;return{location:null==a?void 0:a.location}}export{a as E,n as u};
|
|
2
|
+
//# sourceMappingURL=useUXEvents-Cxgl7xb-.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useUXEvents-Cxgl7xb-.js","sources":["../src/uxsdk/const.ts","../src/uxsdk/useUXEvents.ts"],"sourcesContent":["export const EVENT_COMPONENT_TAB_CHANGE = \"components.tabs.change\"\n","import {defineEvents} from 'openux-js'\n\ninterface NodeCodeSample {\n tab?: string\n example?: string\n code?: string\n}\n\ninterface NodeFramework {\n location: string\n uniformRegion?: string\n}\n\ninterface AnalyticsNodes {\n CodeSample: NodeCodeSample\n Framework: NodeFramework\n}\n\n// TODO: in the future + maybe better API\n// TODO: how to share nodes between packages\n// TODO: node abstraction?\n// TODO: merge abstraction?\nexport const useUXEvents = defineEvents(({CodeSample, Framework}: AnalyticsNodes) => ({\n docs: {\n code: {\n example_change({example}: { example: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n example: example,\n }\n },\n tab_change({tab}: { tab: string }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n tab: tab,\n }\n },\n copy({code}: { code: string }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n code: (code || \"\").slice(0, 100) + \"...\",\n }\n },\n scroll_100() {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n }\n },\n scroll_depth({depth}: { depth: number }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n depth,\n }\n },\n },\n\n details: {\n open({label}: { label: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n label: label,\n }\n },\n close({label}: { label: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n label: label,\n }\n }\n },\n\n anchor: {\n click({id}: { id: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n id: id,\n }\n }\n }\n }\n}))\n\nfunction commonCodeSampleProps({\n CodeSample,\n Framework\n }: {\n CodeSample: NodeCodeSample | undefined\n Framework: NodeFramework | undefined\n}) {\n return {\n ...commonFrameworkProps({Framework}),\n tab: CodeSample?.tab!,\n example: CodeSample?.example!,\n }\n}\n\nfunction commonFrameworkProps({\n Framework\n }: {\n Framework: NodeFramework | undefined\n}) {\n return {\n location: Framework?.location!,\n }\n}\n"],"names":["EVENT_COMPONENT_TAB_CHANGE","useUXEvents","defineEvents","_ref","CodeSample","Framework","docs","code","example_change","_ref2","example","Object","assign","commonFrameworkProps","tab_change","_ref3","tab","commonCodeSampleProps","copy","_ref4","slice","scroll_100","scroll_depth","_ref5","depth","details","open","_ref6","label","close","_ref7","anchor","click","_ref8","id","_ref9","_ref0","location"],"mappings":"yCAAO,IAAMA,EAA6B,yBCsB7BC,EAAcC,EAAa,SAAAC,GAAA,IAAEC,EAAUD,EAAVC,WAAYC,EAASF,EAATE,UAAS,MAAuB,CAClFC,KAAM,CACFC,KAAM,CACFC,eAAc,SAAAC,GAA+B,IAA7BC,EAAOD,EAAPC,QACZ,OAAAC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCK,QAASA,GAEjB,EACAI,WAAU,SAAAC,GAAuB,IAArBC,EAAGD,EAAHC,IACR,OAAAL,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDW,IAAKA,GAEb,EACAE,KAAI,SAAAC,GAAyB,IAAvBZ,EAAIY,EAAJZ,KACF,OAAAI,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDE,MAAOA,GAAQ,IAAIa,MAAM,EAAG,KAAO,OAE3C,EACAC,WAAU,WACN,OAAAV,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,IAE9C,EACAiB,aAAY,SAAAC,GAA2B,IAAzBC,EAAKD,EAALC,MACV,OAAAb,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDmB,MAAAA,GAER,GAGJC,QAAS,CACLC,KAAI,SAAAC,GAA2B,IAAzBC,EAAKD,EAALC,MACF,OAAAjB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCuB,MAAOA,GAEf,EACAC,MAAK,SAAAC,GAA2B,IAAzBF,EAAKE,EAALF,MACH,OAAAjB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCuB,MAAOA,GAEf,GAGJG,OAAQ,CACJC,MAAK,SAAAC,GAAqB,IAAnBC,EAAED,EAAFC,GACH,OAAAvB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpC6B,GAAIA,GAEZ,IAGX,GAED,SAASjB,EAAqBkB,GAM7B,IALkC/B,EAAU+B,EAAV/B,WACAC,EAAS8B,EAAT9B,UAK/B,OAAAM,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCW,IAAKZ,aAAU,EAAVA,EAAYY,IACjBN,QAASN,aAAU,EAAVA,EAAYM,SAE7B,CAEA,SAASG,EAAoBuB,GAI5B,IAHiC/B,EAAS+B,EAAT/B,UAI9B,MAAO,CACHgC,SAAUhC,aAAS,EAATA,EAAWgC,SAE7B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{defineEvents as e}from"openux-js";var a="components.tabs.change",n=e(function(e){var a=e.CodeSample,n=e.Framework;return{docs:{code:{example_change:function(e){var a=e.example;return Object.assign(Object.assign({},t({Framework:n})),{example:a})},tab_change:function(e){var t=e.tab;return Object.assign(Object.assign({},r({CodeSample:a,Framework:n})),{tab:t})},copy:function(e){var t=e.code;return Object.assign(Object.assign({},r({CodeSample:a,Framework:n})),{code:(t||"").slice(0,100)+"..."})},scroll_100:function(){return Object.assign({},r({CodeSample:a,Framework:n}))},scroll_depth:function(e){var t=e.depth;return Object.assign(Object.assign({},r({CodeSample:a,Framework:n})),{depth:t})}},details:{open:function(e){var a=e.label;return Object.assign(Object.assign({},t({Framework:n})),{label:a})},close:function(e){var a=e.label;return Object.assign(Object.assign({},t({Framework:n})),{label:a})}},anchor:{click:function(e){var a=e.id;return Object.assign(Object.assign({},t({Framework:n})),{id:a})}}}}});function r(e){var a=e.CodeSample,n=e.Framework;return Object.assign(Object.assign({},t({Framework:n})),{tab:null==a?void 0:a.tab,example:null==a?void 0:a.example})}function t(e){var a=e.Framework;return{location:null==a?void 0:a.location}}export{a as E,n as u};
|
|
2
|
+
//# sourceMappingURL=useUXEvents-XqAGxoEj.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useUXEvents-XqAGxoEj.js","sources":["../src/uxsdk/const.ts","../src/uxsdk/useUXEvents.ts"],"sourcesContent":["export const EVENT_COMPONENT_TAB_CHANGE = \"components.tabs.change\"\n","import {defineEvents} from 'openux-js'\n\ninterface NodeCodeSample {\n tab?: string\n example?: string\n code?: string\n}\n\ninterface NodeFramework {\n location: string\n uniformRegion?: string\n}\n\ninterface AnalyticsNodes {\n CodeSample: NodeCodeSample\n Framework: NodeFramework\n}\n\n// TODO: in the future + maybe better API\n// TODO: how to share nodes between packages\n// TODO: node abstraction?\n// TODO: merge abstraction?\nexport const useUXEvents = defineEvents(({CodeSample, Framework}: AnalyticsNodes) => ({\n docs: {\n code: {\n example_change({example}: { example: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n example: example,\n }\n },\n tab_change({tab}: { tab: string }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n tab: tab,\n }\n },\n copy({code}: { code: string }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n code: (code || \"\").slice(0, 100) + \"...\",\n }\n },\n scroll_100() {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n }\n },\n scroll_depth({depth}: { depth: number }) {\n return {\n ...commonCodeSampleProps({CodeSample, Framework}),\n depth,\n }\n },\n },\n\n details: {\n open({label}: { label: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n label: label,\n }\n },\n close({label}: { label: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n label: label,\n }\n }\n },\n\n anchor: {\n click({id}: { id: string }) {\n return {\n ...commonFrameworkProps({Framework}),\n id: id,\n }\n }\n }\n }\n}))\n\nfunction commonCodeSampleProps({\n CodeSample,\n Framework\n }: {\n CodeSample: NodeCodeSample | undefined\n Framework: NodeFramework | undefined\n}) {\n return {\n ...commonFrameworkProps({Framework}),\n tab: CodeSample?.tab!,\n example: CodeSample?.example!,\n }\n}\n\nfunction commonFrameworkProps({\n Framework\n }: {\n Framework: NodeFramework | undefined\n}) {\n return {\n location: Framework?.location!,\n }\n}\n"],"names":["EVENT_COMPONENT_TAB_CHANGE","useUXEvents","defineEvents","_ref","CodeSample","Framework","docs","code","example_change","_ref2","example","Object","assign","commonFrameworkProps","tab_change","_ref3","tab","commonCodeSampleProps","copy","_ref4","slice","scroll_100","scroll_depth","_ref5","depth","details","open","_ref6","label","close","_ref7","anchor","click","_ref8","id","_ref9","_ref0","location"],"mappings":"yCAAO,IAAMA,EAA6B,yBCsB7BC,EAAcC,EAAa,SAAAC,GAAA,IAAEC,EAAUD,EAAVC,WAAYC,EAASF,EAATE,UAAS,MAAuB,CAClFC,KAAM,CACFC,KAAM,CACFC,eAAc,SAAAC,GAA+B,IAA7BC,EAAOD,EAAPC,QACZ,OAAAC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCK,QAASA,GAEjB,EACAI,WAAU,SAAAC,GAAuB,IAArBC,EAAGD,EAAHC,IACR,OAAAL,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDW,IAAKA,GAEb,EACAE,KAAI,SAAAC,GAAyB,IAAvBZ,EAAIY,EAAJZ,KACF,OAAAI,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDE,MAAOA,GAAQ,IAAIa,MAAM,EAAG,KAAO,OAE3C,EACAC,WAAU,WACN,OAAAV,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,IAE9C,EACAiB,aAAY,SAAAC,GAA2B,IAAzBC,EAAKD,EAALC,MACV,OAAAb,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDmB,MAAAA,GAER,GAGJC,QAAS,CACLC,KAAI,SAAAC,GAA2B,IAAzBC,EAAKD,EAALC,MACF,OAAAjB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCuB,MAAOA,GAEf,EACAC,MAAK,SAAAC,GAA2B,IAAzBF,EAAKE,EAALF,MACH,OAAAjB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCuB,MAAOA,GAEf,GAGJG,OAAQ,CACJC,MAAK,SAAAC,GAAqB,IAAnBC,EAAED,EAAFC,GACH,OAAAvB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpC6B,GAAIA,GAEZ,IAGX,GAED,SAASjB,EAAqBkB,GAM7B,IALkC/B,EAAU+B,EAAV/B,WACAC,EAAS8B,EAAT9B,UAK/B,OAAAM,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCW,IAAKZ,aAAU,EAAVA,EAAYY,IACjBN,QAASN,aAAU,EAAVA,EAAYM,SAE7B,CAEA,SAASG,EAAoBuB,GAI5B,IAHiC/B,EAAS+B,EAAT/B,UAI9B,MAAO,CACHgC,SAAUhC,aAAS,EAATA,EAAWgC,SAE7B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useRef as r,useEffect as e}from"react";function n(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=t.thresholds,c=void 0===o?[25,50,75,100]:o,i=t.onDepthReached,u=r(new Set);e(function(){if(n.current){var r=n.current;return r.addEventListener("scroll",e),function(){r.removeEventListener("scroll",e)}}function e(){var r=n.current;if(r){var e=r.scrollTop,t=r.scrollHeight-r.clientHeight;if(!(t<=0)){var o=Math.round(e/t*100);c.forEach(function(r){o>=r&&!u.current.has(r)&&(u.current.add(r),null==i||i(r))})}}}},[n.current,c,i])}export{n as u};
|
|
2
|
+
//# sourceMappingURL=useUXScrollDepth-3rk3Z95r.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useUXScrollDepth-3rk3Z95r.js","sources":["../src/uxsdk/useUXScrollDepth.ts"],"sourcesContent":["import React, {useEffect, useRef} from \"react\";\n\nexport interface ScrollDepthOptions {\n thresholds?: number[]; // Default: [25, 50, 75, 100]\n onDepthReached?: (depth: number) => void;\n}\n\nexport function useUXScrollDepth(\n ref: React.RefObject<HTMLElement | null>, \n options: ScrollDepthOptions = {}\n) {\n const { thresholds = [25, 50, 75, 100], onDepthReached } = options;\n const reachedDepthsRef = useRef<Set<number>>(new Set());\n\n useEffect(() => {\n if (!ref.current) {\n return\n }\n\n function handleScroll() {\n const element = ref.current;\n if (!element) return;\n\n const { scrollTop, scrollHeight, clientHeight } = element;\n \n // Calculate current scroll percentage\n const scrollableHeight = scrollHeight - clientHeight;\n if (scrollableHeight <= 0) return;\n \n const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);\n \n // Check which thresholds have been reached\n thresholds.forEach(threshold => {\n if (scrollPercentage >= threshold && !reachedDepthsRef.current.has(threshold)) {\n reachedDepthsRef.current.add(threshold);\n onDepthReached?.(threshold);\n }\n });\n }\n\n const element = ref.current;\n element.addEventListener('scroll', handleScroll);\n\n return () => {\n element.removeEventListener('scroll', handleScroll);\n };\n }, [ref.current, thresholds, onDepthReached]);\n}\n\n"],"names":["useUXScrollDepth","ref","options","_options$thresholds","thresholds","onDepthReached","reachedDepthsRef","useRef","Set","useEffect","current","element","addEventListener","handleScroll","removeEventListener","scrollTop","scrollableHeight","scrollHeight","clientHeight","scrollPercentage","Math","round","forEach","threshold","has","add"],"mappings":"uDAOgBA,EACZC,GACgC,IAAhCC,yDAA8B,CAAA,EAE9BC,EAA2DD,EAAnDE,WAAAA,OAAU,IAAAD,EAAG,CAAC,GAAI,GAAI,GAAI,KAAIA,EAAEE,EAAmBH,EAAnBG,eAClCC,EAAmBC,EAAoB,IAAIC,KAEjDC,EAAU,WACN,GAAKR,EAAIS,QAAT,CAyBA,IAAMC,EAAUV,EAAIS,QAGpB,OAFAC,EAAQC,iBAAiB,SAAUC,GAE5B,WACHF,EAAQG,oBAAoB,SAAUD,EAC1C,CA5BA,CAEA,SAASA,IACL,IAAMF,EAAUV,EAAIS,QACpB,GAAKC,EAAL,CAEA,IAAQI,EAA0CJ,EAA1CI,UAGFC,EAH4CL,EAA/BM,aAA+BN,EAAjBO,aAIjC,KAAIF,GAAoB,GAAxB,CAEA,IAAMG,EAAmBC,KAAKC,MAAON,EAAYC,EAAoB,KAGrEZ,EAAWkB,QAAQ,SAAAC,GACXJ,GAAoBI,IAAcjB,EAAiBI,QAAQc,IAAID,KAC/DjB,EAAiBI,QAAQe,IAAIF,GAC7BlB,SAAAA,EAAiBkB,GAEzB,EAV2B,CANb,CAiBlB,CAQJ,EAAG,CAACtB,EAAIS,QAASN,EAAYC,GACjC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useRef as r,useEffect as e}from"react";function n(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=t.thresholds,c=void 0===o?[25,50,75,100]:o,i=t.onDepthReached,u=r(new Set);e(function(){if(n.current){var r=n.current;return r.addEventListener("scroll",e),function(){r.removeEventListener("scroll",e)}}function e(){var r=n.current;if(r){var e=r.scrollTop,t=r.scrollHeight-r.clientHeight;if(!(t<=0)){var o=Math.round(e/t*100);c.forEach(function(r){o>=r&&!u.current.has(r)&&(u.current.add(r),null==i||i(r))})}}}},[n.current,c,i])}export{n as u};
|
|
2
|
+
//# sourceMappingURL=useUXScrollDepth-BwK-XOBg.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useUXScrollDepth-BwK-XOBg.js","sources":["../src/uxsdk/useUXScrollDepth.ts"],"sourcesContent":["import React, {useEffect, useRef} from \"react\";\n\nexport interface ScrollDepthOptions {\n thresholds?: number[]; // Default: [25, 50, 75, 100]\n onDepthReached?: (depth: number) => void;\n}\n\nexport function useUXScrollDepth(\n ref: React.RefObject<HTMLElement | null>, \n options: ScrollDepthOptions = {}\n) {\n const { thresholds = [25, 50, 75, 100], onDepthReached } = options;\n const reachedDepthsRef = useRef<Set<number>>(new Set());\n\n useEffect(() => {\n if (!ref.current) {\n return\n }\n\n function handleScroll() {\n const element = ref.current;\n if (!element) return;\n\n const { scrollTop, scrollHeight, clientHeight } = element;\n \n // Calculate current scroll percentage\n const scrollableHeight = scrollHeight - clientHeight;\n if (scrollableHeight <= 0) return;\n \n const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);\n \n // Check which thresholds have been reached\n thresholds.forEach(threshold => {\n if (scrollPercentage >= threshold && !reachedDepthsRef.current.has(threshold)) {\n reachedDepthsRef.current.add(threshold);\n onDepthReached?.(threshold);\n }\n });\n }\n\n const element = ref.current;\n element.addEventListener('scroll', handleScroll);\n\n return () => {\n element.removeEventListener('scroll', handleScroll);\n };\n }, [ref.current, thresholds, onDepthReached]);\n}\n\n"],"names":["useUXScrollDepth","ref","options","_options$thresholds","thresholds","onDepthReached","reachedDepthsRef","useRef","Set","useEffect","current","element","addEventListener","handleScroll","removeEventListener","scrollTop","scrollableHeight","scrollHeight","clientHeight","scrollPercentage","Math","round","forEach","threshold","has","add"],"mappings":"uDAOgBA,EACZC,GACgC,IAAhCC,yDAA8B,CAAA,EAE9BC,EAA2DD,EAAnDE,WAAAA,OAAU,IAAAD,EAAG,CAAC,GAAI,GAAI,GAAI,KAAIA,EAAEE,EAAmBH,EAAnBG,eAClCC,EAAmBC,EAAoB,IAAIC,KAEjDC,EAAU,WACN,GAAKR,EAAIS,QAAT,CAyBA,IAAMC,EAAUV,EAAIS,QAGpB,OAFAC,EAAQC,iBAAiB,SAAUC,GAE5B,WACHF,EAAQG,oBAAoB,SAAUD,EAC1C,CA5BA,CAEA,SAASA,IACL,IAAMF,EAAUV,EAAIS,QACpB,GAAKC,EAAL,CAEA,IAAQI,EAA0CJ,EAA1CI,UAGFC,EAH4CL,EAA/BM,aAA+BN,EAAjBO,aAIjC,KAAIF,GAAoB,GAAxB,CAEA,IAAMG,EAAmBC,KAAKC,MAAON,EAAYC,EAAoB,KAGrEZ,EAAWkB,QAAQ,SAAAC,GACXJ,GAAoBI,IAAcjB,EAAiBI,QAAQc,IAAID,KAC/DjB,EAAiBI,QAAQe,IAAIF,GAC7BlB,SAAAA,EAAiBkB,GAEzB,EAV2B,CANb,CAiBlB,CAQJ,EAAG,CAACtB,EAAIS,QAASN,EAAYC,GACjC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useRef as r,useEffect as e}from"react";function n(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=t.thresholds,c=void 0===o?[25,50,75,100]:o,i=t.onDepthReached,u=r(new Set);e(function(){if(n.current){var r=n.current;return r.addEventListener("scroll",e),function(){r.removeEventListener("scroll",e)}}function e(){var r=n.current;if(r){var e=r.scrollTop,t=r.scrollHeight-r.clientHeight;if(!(t<=0)){var o=Math.round(e/t*100);c.forEach(function(r){o>=r&&!u.current.has(r)&&(u.current.add(r),null==i||i(r))})}}}},[n.current,c,i])}export{n as u};
|
|
2
|
+
//# sourceMappingURL=useUXScrollDepth-DKre7PBz.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useUXScrollDepth-DKre7PBz.js","sources":["../src/uxsdk/useUXScrollDepth.ts"],"sourcesContent":["import React, {useEffect, useRef} from \"react\";\n\nexport interface ScrollDepthOptions {\n thresholds?: number[]; // Default: [25, 50, 75, 100]\n onDepthReached?: (depth: number) => void;\n}\n\nexport function useUXScrollDepth(\n ref: React.RefObject<HTMLElement | null>, \n options: ScrollDepthOptions = {}\n) {\n const { thresholds = [25, 50, 75, 100], onDepthReached } = options;\n const reachedDepthsRef = useRef<Set<number>>(new Set());\n\n useEffect(() => {\n if (!ref.current) {\n return\n }\n\n function handleScroll() {\n const element = ref.current;\n if (!element) return;\n\n const { scrollTop, scrollHeight, clientHeight } = element;\n \n // Calculate current scroll percentage\n const scrollableHeight = scrollHeight - clientHeight;\n if (scrollableHeight <= 0) return;\n \n const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);\n \n // Check which thresholds have been reached\n thresholds.forEach(threshold => {\n if (scrollPercentage >= threshold && !reachedDepthsRef.current.has(threshold)) {\n reachedDepthsRef.current.add(threshold);\n onDepthReached?.(threshold);\n }\n });\n }\n\n const element = ref.current;\n element.addEventListener('scroll', handleScroll);\n\n return () => {\n element.removeEventListener('scroll', handleScroll);\n };\n }, [ref.current, thresholds, onDepthReached]);\n}\n\n"],"names":["useUXScrollDepth","ref","options","_options$thresholds","thresholds","onDepthReached","reachedDepthsRef","useRef","Set","useEffect","current","element","addEventListener","handleScroll","removeEventListener","scrollTop","scrollableHeight","scrollHeight","clientHeight","scrollPercentage","Math","round","forEach","threshold","has","add"],"mappings":"uDAOgBA,EACZC,GACgC,IAAhCC,yDAA8B,CAAA,EAE9BC,EAA2DD,EAAnDE,WAAAA,OAAU,IAAAD,EAAG,CAAC,GAAI,GAAI,GAAI,KAAIA,EAAEE,EAAmBH,EAAnBG,eAClCC,EAAmBC,EAAoB,IAAIC,KAEjDC,EAAU,WACN,GAAKR,EAAIS,QAAT,CAyBA,IAAMC,EAAUV,EAAIS,QAGpB,OAFAC,EAAQC,iBAAiB,SAAUC,GAE5B,WACHF,EAAQG,oBAAoB,SAAUD,EAC1C,CA5BA,CAEA,SAASA,IACL,IAAMF,EAAUV,EAAIS,QACpB,GAAKC,EAAL,CAEA,IAAQI,EAA0CJ,EAA1CI,UAGFC,EAH4CL,EAA/BM,aAA+BN,EAAjBO,aAIjC,KAAIF,GAAoB,GAAxB,CAEA,IAAMG,EAAmBC,KAAKC,MAAON,EAAYC,EAAoB,KAGrEZ,EAAWkB,QAAQ,SAAAC,GACXJ,GAAoBI,IAAcjB,EAAiBI,QAAQc,IAAID,KAC/DjB,EAAiBI,QAAQe,IAAIF,GAC7BlB,SAAAA,EAAiBkB,GAEzB,EAV2B,CANb,CAiBlB,CAQJ,EAAG,CAACtB,EAAIS,QAASN,EAAYC,GACjC"}
|
package/dist/uxsdk.d.ts
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React$1 from 'react';
|
|
2
|
+
|
|
3
|
+
declare const EVENT_COMPONENT_TAB_CHANGE = "components.tabs.change";
|
|
4
|
+
|
|
5
|
+
declare function useUXClick(openEvent: (data: any) => void, closeEvent: (data: any) => void, getData: () => any): (event: React$1.MouseEvent) => void;
|
|
6
|
+
|
|
7
|
+
interface ScrollDepthOptions {
|
|
8
|
+
thresholds?: number[];
|
|
9
|
+
onDepthReached?: (depth: number) => void;
|
|
10
|
+
}
|
|
11
|
+
declare function useUXScrollDepth(ref: React$1.RefObject<HTMLElement | null>, options?: ScrollDepthOptions): void;
|
|
12
|
+
|
|
13
|
+
declare const useUXEvents: () => {
|
|
14
|
+
docs: {
|
|
15
|
+
code: {
|
|
16
|
+
example_change: (args: {
|
|
17
|
+
example: string;
|
|
18
|
+
}) => void;
|
|
19
|
+
tab_change: (args: {
|
|
20
|
+
tab: string;
|
|
21
|
+
}) => void;
|
|
22
|
+
copy: (args: {
|
|
23
|
+
code: string;
|
|
24
|
+
}) => void;
|
|
25
|
+
scroll_100: (args: unknown) => void;
|
|
26
|
+
scroll_depth: (args: {
|
|
27
|
+
depth: number;
|
|
28
|
+
}) => void;
|
|
29
|
+
};
|
|
30
|
+
details: {
|
|
31
|
+
open: (args: {
|
|
32
|
+
label: string;
|
|
33
|
+
}) => void;
|
|
34
|
+
close: (args: {
|
|
35
|
+
label: string;
|
|
36
|
+
}) => void;
|
|
37
|
+
};
|
|
38
|
+
anchor: {
|
|
39
|
+
click: (args: {
|
|
40
|
+
id: string;
|
|
41
|
+
}) => void;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* TODO: not ideal solution cuz sometimes has a bug but currently its enough
|
|
48
|
+
*
|
|
49
|
+
* This hook is used to track the hover and click events of an unreachable element.
|
|
50
|
+
*/
|
|
51
|
+
declare function useUXUnreachableElementTracker(element: React.RefObject<HTMLElement | null>, hoverCb: () => void, clickCb: () => void): void;
|
|
52
|
+
|
|
53
|
+
export { EVENT_COMPONENT_TAB_CHANGE, useUXClick, useUXEvents, useUXScrollDepth, useUXUnreachableElementTracker };
|
package/dist/uxsdk.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export{E as EVENT_COMPONENT_TAB_CHANGE,u as useUXEvents}from"./useUXEvents-CJtgGV4R.js";export{u as useUXClick}from"./useUXClick-NwpsiuK9.js";export{u as useUXScrollDepth}from"./useUXScrollDepth-BwK-XOBg.js";import{useRef as e,useCallback as r,useEffect as t}from"react";import"openux-js";import"./_rollupPluginBabelHelpers-CvhQFv1t.js";function n(n,u,c){var o=e(!1),i=e(!1),s=e(null),l=e(0),a=r(function(){var e=Date.now();e-l.current>1e3&&(o.current=!0,l.current=e,u())},[u]),m=r(function(){s.current&&clearTimeout(s.current),s.current=setTimeout(function(){o.current=!1,s.current=null},50)},[]);t(function(){if(n.current)return n.current.addEventListener("mouseenter",a),n.current.addEventListener("mouseleave",m),function(){n.current&&(n.current.removeEventListener("mouseenter",a),n.current.removeEventListener("mouseleave",m)),s.current&&clearTimeout(s.current)}},[n.current,a,m]);var v=r(function(){s.current&&(clearTimeout(s.current),s.current=null),i.current=!1,o.current&&(o.current=!1,i.current=!0,c())},[c]);t(function(){return document.addEventListener("visibilitychange",v),function(){document.removeEventListener("visibilitychange",v),s.current&&clearTimeout(s.current)}},[v])}export{n as useUXUnreachableElementTracker};
|
|
2
|
+
//# sourceMappingURL=uxsdk.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"uxsdk.js","sources":["../src/uxsdk/useUXUnreachableElementTracker.ts"],"sourcesContent":["import { useEffect, useRef, useCallback } from \"react\"\n\n/**\n * TODO: not ideal solution cuz sometimes has a bug but currently its enough\n * \n * This hook is used to track the hover and click events of an unreachable element.\n */\nexport function useUXUnreachableElementTracker(\n element: React.RefObject<HTMLElement | null>,\n hoverCb: () => void,\n clickCb: () => void\n) {\n const hover = useRef(false)\n const click = useRef(false)\n const mouseLeaveTimeout = useRef<number | null>(null)\n\n const lastHoverTime = useRef(0)\n const DEBOUNCE_DELAY = 1000 // 1 second debounce\n const MOUSE_LEAVE_DELAY = 50 // 50ms delay to allow visibilitychange to fire first\n\n const handleMouseEnter = useCallback(() => {\n const now = Date.now()\n if (now - lastHoverTime.current > DEBOUNCE_DELAY) {\n hover.current = true\n lastHoverTime.current = now\n hoverCb()\n }\n }, [hoverCb])\n\n const handleMouseLeave = useCallback(() => {\n // console.log(\"mouse leave\")\n // Clear any existing timeout\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n }\n \n // Delay setting hover to false to allow visibilitychange to fire first\n mouseLeaveTimeout.current = setTimeout(() => {\n hover.current = false\n mouseLeaveTimeout.current = null\n }, MOUSE_LEAVE_DELAY)\n }, [])\n\n useEffect(() => {\n if (!element.current) {\n return\n }\n\n element.current.addEventListener(\"mouseenter\", handleMouseEnter)\n element.current.addEventListener(\"mouseleave\", handleMouseLeave)\n\n return () => {\n if (element.current) {\n element.current.removeEventListener(\"mouseenter\", handleMouseEnter)\n element.current.removeEventListener(\"mouseleave\", handleMouseLeave)\n }\n // Clean up timeout on unmount\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n }\n }\n\n }, [element.current, handleMouseEnter, handleMouseLeave])\n\n // detect visibility loss (e.g. new tab opened)\n const handleVisibilityChange = useCallback(() => {\n // Clear the mouseleave timeout since visibility change indicates a click\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n mouseLeaveTimeout.current = null\n }\n \n click.current = false\n // console.log(hover, 7777)\n if (hover.current) {\n hover.current = false\n click.current = true\n clickCb()\n }\n }, [clickCb])\n\n useEffect(() => {\n // function handleBeforeUnload() {\n // console.log(hover.current)\n // console.log(111)\n // }\n\n // window.addEventListener('beforeunload', handleBeforeUnload);\n document.addEventListener('visibilitychange', handleVisibilityChange);\n\n return () => {\n // window.removeEventListener('beforeunload', handleBeforeUnload)\n document.removeEventListener('visibilitychange', handleVisibilityChange)\n // Clean up timeout on unmount\n if (mouseLeaveTimeout.current) {\n clearTimeout(mouseLeaveTimeout.current)\n }\n }\n }, [handleVisibilityChange]) // Add handleVisibilityChange back to dependencies since it's now memoized\n}"],"names":["useUXUnreachableElementTracker","element","hoverCb","clickCb","hover","useRef","click","mouseLeaveTimeout","lastHoverTime","handleMouseEnter","useCallback","now","Date","current","handleMouseLeave","clearTimeout","setTimeout","useEffect","addEventListener","removeEventListener","handleVisibilityChange","document"],"mappings":"0VAOgBA,EACZC,EACAC,EACAC,GAEA,IAAMC,EAAQC,GAAO,GACfC,EAAQD,GAAO,GACfE,EAAoBF,EAAsB,MAE1CG,EAAgBH,EAAO,GAIvBI,EAAmBC,EAAY,WACjC,IAAMC,EAAMC,KAAKD,MACbA,EAAMH,EAAcK,QALL,MAMfT,EAAMS,SAAU,EAChBL,EAAcK,QAAUF,EACxBT,IAER,EAAG,CAACA,IAEEY,EAAmBJ,EAAY,WAG7BH,EAAkBM,SAClBE,aAAaR,EAAkBM,SAInCN,EAAkBM,QAAUG,WAAW,WACnCZ,EAAMS,SAAU,EAChBN,EAAkBM,QAAU,IAChC,EAtBsB,GAuB1B,EAAG,IAEHI,EAAU,WACN,GAAKhB,EAAQY,QAOb,OAHAZ,EAAQY,QAAQK,iBAAiB,aAAcT,GAC/CR,EAAQY,QAAQK,iBAAiB,aAAcJ,GAExC,WACCb,EAAQY,UACRZ,EAAQY,QAAQM,oBAAoB,aAAcV,GAClDR,EAAQY,QAAQM,oBAAoB,aAAcL,IAGlDP,EAAkBM,SAClBE,aAAaR,EAAkBM,QAEvC,CAEJ,EAAG,CAACZ,EAAQY,QAASJ,EAAkBK,IAGvC,IAAMM,EAAyBV,EAAY,WAEnCH,EAAkBM,UAClBE,aAAaR,EAAkBM,SAC/BN,EAAkBM,QAAU,MAGhCP,EAAMO,SAAU,EAEZT,EAAMS,UACNT,EAAMS,SAAU,EAChBP,EAAMO,SAAU,EAChBV,IAER,EAAG,CAACA,IAEJc,EAAU,WASN,OAFAI,SAASH,iBAAiB,mBAAoBE,GAEvC,WAEHC,SAASF,oBAAoB,mBAAoBC,GAE7Cb,EAAkBM,SAClBE,aAAaR,EAAkBM,QAEvC,CACJ,EAAG,CAACO,GACR"}
|
package/dist/views.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
interface HomeViewProps {
|
|
4
|
+
header: React.ReactNode;
|
|
5
|
+
body: React.ReactNode;
|
|
6
|
+
footer: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
declare function HomeView({ header, body, footer }: HomeViewProps): React.JSX.Element;
|
|
9
|
+
declare namespace HomeView {
|
|
10
|
+
var Body: ({ children, kind }: HomeViewBodyProps) => React.JSX.Element;
|
|
11
|
+
}
|
|
12
|
+
interface HomeViewBodyProps {
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
kind?: "secondary";
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export { HomeView };
|
|
18
|
+
export type { HomeViewBodyProps, HomeViewProps };
|
package/dist/views.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import e from"react";function n(n){var r=n.header,t=n.body,a=n.footer;return e.createElement("div",{className:"ht0uhof"},r,t,a)}n.Body=function(n){var r=n.children,t=n.kind;return e.createElement("div",{className:"\n ".concat("hv4nn8x","\n ").concat("secondary"===t?"hjhxqbp":"","\n ")},e.createElement("div",{className:"h16x7upz"},r))};export{n as HomeView};
|
|
2
|
+
//# sourceMappingURL=views.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"views.js","sources":["../src/views/HomeView/HomeView.tsx","../src/views/HomeView/HomeView.styles.tsx"],"sourcesContent":["import React from \"react\"\nimport * as cn from \"./HomeView.styles\";\n\nexport interface HomeViewProps {\n header: React.ReactNode\n body: React.ReactNode\n footer: React.ReactNode\n}\n\nexport function HomeView({header, body, footer}: HomeViewProps) {\n return <div className={cn.HomeViewHost}>\n {header}\n {body}\n {footer}\n </div>\n}\n\nexport interface HomeViewBodyProps {\n children: React.ReactNode\n kind?: \"secondary\"\n}\n\nHomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {\n return <div className={`\n ${cn.HomeViewBodyHost}\n ${kind === \"secondary\" ? cn.HomeViewBodyHostSecondary : \"\"}\n `}>\n <div className={cn.HomeViewBodyContent}>\n {children}\n </div>\n </div>\n}\n\n\n","import {css} from \"@linaria/core\";\n\nexport const HomeViewHost = css`\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n`;\n\nexport const HomeViewBodyHost = css`\n background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);\n backdrop-filter: sepia(10%);\n background-size: 30px 30px;\n padding: 60px;\n flex: 1;\n`;\n\nexport const HomeViewBodyHostSecondary = css`\n background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);\n`;\n\nexport const HomeViewBodyContent = css`\n width: 1200px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 80px;\n\n @media (max-width: 1200px) {\n width: 100%;\n padding: 0 20px;\n }\n\n @media (max-width: 768px) {\n width: 100%;\n padding: 0 10px;\n }\n`; "],"names":["HomeView","_ref","header","body","footer","React","createElement","className","Body","_ref2","children","kind","concat"],"mappings":"qBASM,SAAUA,EAAQC,GAAsC,IAApCC,EAAMD,EAANC,OAAQC,EAAIF,EAAJE,KAAMC,EAAMH,EAANG,OACpC,OAAOC,EAAAC,cAAA,MAAA,CAAKC,UCRS,WDShBL,EACAC,EACAC,EAET,CAOAJ,EAASQ,KAAO,SAAqBC,GAAoC,IAAlCC,EAAQD,EAARC,SAAUC,EAAIF,EAAJE,KAC7C,OAAON,EAAAC,cAAA,MAAA,CAAKC,uBAASK,OCfI,UDgBA,cAAAA,OACV,cAATD,ECT4B,UDS0B,GAAE,WAE1DN,EAAAC,cAAA,MAAA,CAAKC,UCPmB,YDQnBG,GAGb"}
|