@xyd-js/components 0.0.0-build-8b31648-20250923204702 → 0.0.0-build-9f87f13-20250930210637
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/CHANGELOG.md +2 -2
- package/dist/{Button-6A7unxBT.js → Button-fMF3BbTS.js} +2 -2
- package/dist/{Button-6A7unxBT.js.map → Button-fMF3BbTS.js.map} +1 -1
- package/dist/{CodeSample-DA-TjeYa.js → CodeSample-BvMpEdYx.js} +2 -2
- package/dist/{CodeSample-DA-TjeYa.js.map → CodeSample-BvMpEdYx.js.map} +1 -1
- package/dist/{Icon-Dc8GILYQ.js → Icon-BECiB8p6.js} +2 -2
- package/dist/{Icon-Dc8GILYQ.js.map → Icon-BECiB8p6.js.map} +1 -1
- package/dist/{PageFirstSlide-CWQbuuIw.js → PageFirstSlide-B5TKIFNT.js} +2 -2
- package/dist/{PageFirstSlide-CWQbuuIw.js.map → PageFirstSlide-B5TKIFNT.js.map} +1 -1
- package/dist/{TabsAnalytics-D88SsAna.js → TabsAnalytics-pSll2pNA.js} +2 -2
- package/dist/{TabsAnalytics-D88SsAna.js.map → TabsAnalytics-pSll2pNA.js.map} +1 -1
- package/dist/{Update-ITj2CgIR.js → Update-F_-paxNc.js} +2 -2
- package/dist/{Update-ITj2CgIR.js.map → Update-F_-paxNc.js.map} +1 -1
- package/dist/{VideoGuide-B5GYVCMy.js → VideoGuide-mnR1NnMY.js} +2 -2
- package/dist/{VideoGuide-B5GYVCMy.js.map → VideoGuide-mnR1NnMY.js.map} +1 -1
- package/dist/{_rollupPluginBabelHelpers-iq1gUDHm.js → _rollupPluginBabelHelpers-CKM-H-qJ.js} +1 -1
- package/dist/_rollupPluginBabelHelpers-CKM-H-qJ.js.map +1 -0
- package/dist/coder.d.ts +1 -0
- package/dist/coder.js +1 -1
- package/dist/content.d.ts +1 -0
- package/dist/content.js +1 -1
- package/dist/index.css +85 -85
- package/dist/layouts.js +1 -1
- package/dist/pages.js +1 -1
- package/dist/system.js +1 -1
- package/dist/{useUXClick-BytfW2o9.js → useUXClick-DqZOqZ6b.js} +2 -2
- package/dist/{useUXClick-BytfW2o9.js.map → useUXClick-DqZOqZ6b.js.map} +1 -1
- package/dist/{useUXEvents-CnzubHLH.js → useUXEvents-zrExjrQz.js} +1 -1
- package/dist/{useUXEvents-CnzubHLH.js.map → useUXEvents-zrExjrQz.js.map} +1 -1
- package/dist/{useUXScrollDepth-CIw1SSDV.js → useUXScrollDepth-cHzHGxha.js} +1 -1
- package/dist/{useUXScrollDepth-CIw1SSDV.js.map → useUXScrollDepth-cHzHGxha.js.map} +1 -1
- package/dist/uxsdk.js +1 -1
- package/dist/writer.js +1 -1
- package/package.json +2 -2
- package/src/coder/CodeSample/CodeSample.tsx +5 -1
- package/src/coder/CodeTabs/CodeTabs.tsx +120 -105
- package/dist/_rollupPluginBabelHelpers-iq1gUDHm.js.map +0 -1
package/dist/layouts.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e}from"./_rollupPluginBabelHelpers-
|
|
1
|
+
import{a as e}from"./_rollupPluginBabelHelpers-CKM-H-qJ.js";import*as t from"react";import{useRef as a,useState as r,useEffect as n,useContext as i}from"react";var l=t.createContext({scrollRef:t.createRef(),isMobileNavOpen:!1,setIsMobileNavOpen:function(){}});function c(i){var c=a(null),o=r(!1),v=e(o,2),s=v[0],m=v[1],p=function(t,a){var i=r(!1),l=e(i,2),c=l[0],o=l[1],v=r(0),s=e(v,2),m=s[0],p=s[1],b=r(null),E=e(b,2),f=E[0],g=E[1],h=r(0),M=e(h,2),N=M[0],O=M[1],y=r(0),H=e(y,2),C=H[0],I=H[1],w=r(!1),k=e(w,2);k[0];var x=k[1];function F(){o(!1),p(0),g(null),O(0),I(0),x(!1)}function L(e){if(e.target instanceof HTMLElement){var t=e.target.scrollTop;if(t<d)return o(!1),O(0),p(t),void x(!1);var a=t>m?"down":"up";a!==f&&(g(a),I(t),x(!0));var r=Math.abs(t-C);"down"===a&&r>u?(o(!0),O(t),I(t)):"up"===a&&r>d&&(o(!1),O(t),I(t)),p(t)}}return n(function(){F()},[a]),n(function(){if(null==t?void 0:t.current)return t.current.addEventListener("scroll",L),function(){var e;null===(e=t.current)||void 0===e||e.removeEventListener("scroll",L)}},[t,a,m,f,N,C]),{hideMainHeader:c}}(i.subheader?c:null,i.scrollKey),b=p.hideMainHeader;return n(function(){c.current=window},[]),t.createElement(l,{value:{scrollRef:c,isMobileNavOpen:s,setIsMobileNavOpen:m}},t.createElement("xyd-layout-primary",{className:"".concat("l1u84pnh"," ").concat(i.className||""),"data-subheader":String(!!i.subheader),"data-hide-subheader":String(b),"data-layout":i.layout,id:i.id},i.children))}function o(e){var a=e.active;return t.createElement("span",{part:"hamburger-line","data-active":a})}c.Header=function(e){var a=i(l);return a.isMobileNavOpen,a.setIsMobileNavOpen,t.createElement(t.Fragment,null,t.createElement("header",{part:"header"},e.banner,t.createElement("div",{part:"header-content"},e.header),e.subheader&&t.createElement("div",{part:"header-subheader"},e.subheader)))},c.Hamburger=function(){var e=i(l),a=e.isMobileNavOpen,r=e.setIsMobileNavOpen;return t.createElement("button",{part:"hamburger-button","aria-label":"Toggle navigation menu",onClick:function(){return r(!a)}},t.createElement("div",{part:"hamburger-icon"},t.createElement(o,{active:a}),t.createElement(o,{active:a}),t.createElement(o,{active:a})))},c.MobileAside=function(e){var a=i(l),r=a.isMobileNavOpen,n=a.setIsMobileNavOpen;return t.createElement(t.Fragment,null,t.createElement("div",{part:"mobile-overlay","data-active":r,onClick:function(){return n(!1)}}),t.createElement("aside",{part:"mobile-sidebar","data-active":r},t.createElement("div",{part:"mobile-sidebar-aside"},e.aside),t.createElement("div",null,t.createElement("button",{part:"mobile-sidebar-close-button","aria-label":"Close navigation menu",onClick:function(){return n(!1)}},t.createElement("div",{part:"mobile-sidebar-close-icon"})))))},c.Page=function(e){return t.createElement(t.Fragment,null,t.createElement("div",{part:"page"},t.createElement("div",{part:"page-scroll"},t.createElement("div",{part:"page-container"},t.createElement("div",{part:"page-article-container"},t.createElement("article",{part:"page-article"},t.createElement("section",{part:"page-article-content"},e.children)),e.contentNav&&t.createElement("nav",{part:"page-article-nav"},e.contentNav)))),e.after))};var u=200,d=100;export{c as LayoutPrimary};
|
|
2
2
|
//# sourceMappingURL=layouts.js.map
|
package/dist/pages.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{P as PageBlogHome,b as PageFirstSlide,a as PageHome}from"./PageFirstSlide-
|
|
1
|
+
export{P as PageBlogHome,b as PageFirstSlide,a as PageHome}from"./PageFirstSlide-B5TKIFNT.js";import*as e from"react";import"./_rollupPluginBabelHelpers-CKM-H-qJ.js";import"./VideoGuide-mnR1NnMY.js";import"./Icon-BECiB8p6.js";import"./Button-fMF3BbTS.js";import"./useUXEvents-zrExjrQz.js";import"openux-js";import"./TabsAnalytics-pSll2pNA.js";import"radix-ui";import"lucide-react";function o(){return e.createElement("div",{className:"pqkuduk"},"Blog Post")}export{o as PageBlogPost};
|
|
2
2
|
//# sourceMappingURL=pages.js.map
|
package/dist/system.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e}from"./Icon-
|
|
1
|
+
import{a as e}from"./Icon-BECiB8p6.js";import*as t from"react";import n,{useEffect as r,useRef as a}from"react";import{B as o}from"./Button-fMF3BbTS.js";import{a as l}from"./_rollupPluginBabelHelpers-CKM-H-qJ.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("div",{key:"".concat(e.href,"-").concat(t)},n.createElement("a",{target:"_blank",href:e.href},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
2
|
//# sourceMappingURL=system.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as r}from"./_rollupPluginBabelHelpers-
|
|
2
|
-
//# sourceMappingURL=useUXClick-
|
|
1
|
+
import{a as r}from"./_rollupPluginBabelHelpers-CKM-H-qJ.js";import{useState as a}from"react";function o(o,t,e){var n=a(!1),u=r(n,2),i=u[0],l=u[1];return function(r){var a=!i;l(a);var n=e();a?o(n):t(n)}}export{o as u};
|
|
2
|
+
//# sourceMappingURL=useUXClick-DqZOqZ6b.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUXClick-
|
|
1
|
+
{"version":3,"file":"useUXClick-DqZOqZ6b.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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
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-
|
|
2
|
+
//# sourceMappingURL=useUXEvents-zrExjrQz.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUXEvents-
|
|
1
|
+
{"version":3,"file":"useUXEvents-zrExjrQz.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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
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-
|
|
2
|
+
//# sourceMappingURL=useUXScrollDepth-cHzHGxha.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUXScrollDepth-
|
|
1
|
+
{"version":3,"file":"useUXScrollDepth-cHzHGxha.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.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{E as EVENT_COMPONENT_TAB_CHANGE,u as useUXEvents}from"./useUXEvents-
|
|
1
|
+
export{E as EVENT_COMPONENT_TAB_CHANGE,u as useUXEvents}from"./useUXEvents-zrExjrQz.js";export{u as useUXClick}from"./useUXClick-DqZOqZ6b.js";export{u as useUXScrollDepth}from"./useUXScrollDepth-cHzHGxha.js";import{useRef as e,useCallback as r,useEffect as t}from"react";import"openux-js";import"./_rollupPluginBabelHelpers-CKM-H-qJ.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
2
|
//# sourceMappingURL=uxsdk.js.map
|
package/dist/writer.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{A as Anchor,B as Badge,c as Banner,G as GuideCard,H as Heading,I as IconSocial,L as List,a as ListOl,N as NavLinks,S as Steps,T as Table,b as Tabs,V as VideoGuide}from"./VideoGuide-
|
|
1
|
+
export{A as Anchor,B as Badge,c as Banner,G as GuideCard,H as Heading,I as IconSocial,L as List,a as ListOl,N as NavLinks,S as Steps,T as Table,b as Tabs,V as VideoGuide}from"./VideoGuide-mnR1NnMY.js";export{B as Blockquote,c as Breadcrumbs,a as Callout,d as Card,b as Code,C as ColorSchemeButton,D as Details,H as Hr,I as Image,U as Update,u as useColorScheme}from"./Update-F_-paxNc.js";export{B as Button}from"./Button-fMF3BbTS.js";import{I as e,a as r}from"./Icon-BECiB8p6.js";export{b as IconProvider}from"./Icon-BECiB8p6.js";import t from"react";export{T as Text}from"./TabsAnalytics-pSll2pNA.js";import"./useUXEvents-zrExjrQz.js";import"./_rollupPluginBabelHelpers-CKM-H-qJ.js";import"radix-ui";import"lucide-react";import"./useUXClick-DqZOqZ6b.js";import"openux-js";function s(e){return e}function o(e){var a=e.children,r=e.className;return t.createElement("pre",{className:"".concat("p1vb39qj"," ").concat(r||"")},a)}function n(e){return e}var i="TocCard-module_TocCardHost__pT0XJ";function l(a){var r=a.title,s=a.description,o=a.href,n=a.className,c=a.icon,l=a.as||m;return t.createElement("xyd-toccard",{className:"".concat(i," ").concat(n||"")},t.createElement("div",{part:"container"},t.createElement(l,{part:"link",href:o,target:"_blank",rel:"noreferrer"},t.createElement("div",{part:"title-container"},t.createElement("div",{part:"title"},r),c&&t.createElement(e,{name:c,size:16})),t.createElement("div",{part:"description"},s))))}function m(e){var a=e.children,s=e.href,o=r(e,["children","href"]);return t.createElement("a",Object.assign({href:s},o),a)}export{s as DetailsPropsProps,e as Icon,o as Pre,n as TabsProps,l as TocCard};
|
|
2
2
|
//# sourceMappingURL=writer.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyd-js/components",
|
|
3
|
-
"version": "0.0.0-build-
|
|
3
|
+
"version": "0.0.0-build-9f87f13-20250930210637",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@code-hike/lighter": "^1.0.3",
|
|
50
50
|
"openux-js": "0.0.0-pre.1",
|
|
51
51
|
"react": "^19.1.0",
|
|
52
|
-
"@xyd-js/core": "0.0.0-build-
|
|
52
|
+
"@xyd-js/core": "0.0.0-build-9f87f13-20250930210637"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@linaria/core": "^6.2.0",
|
|
@@ -24,16 +24,18 @@ export interface CodeSampleProps {
|
|
|
24
24
|
descriptionHead?: string
|
|
25
25
|
descriptionContent?: string | React.ReactNode
|
|
26
26
|
descriptionIcon?: string
|
|
27
|
+
markdownFormat?: boolean
|
|
27
28
|
kind?: "secondary"
|
|
28
29
|
controlByMeta?: boolean // TODO: BETTER IN THE FUTURE
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
const CodeContext = React.createContext<{
|
|
32
|
+
export const CodeContext = React.createContext<{
|
|
32
33
|
size?: "full"
|
|
33
34
|
lineNumbers?: boolean
|
|
34
35
|
descriptionHead?: string
|
|
35
36
|
descriptionContent?: string | React.ReactNode
|
|
36
37
|
descriptionIcon?: string
|
|
38
|
+
markdownFormat?: boolean
|
|
37
39
|
}>({})
|
|
38
40
|
|
|
39
41
|
export function CodeSample(props: CodeSampleProps) {
|
|
@@ -58,6 +60,7 @@ function $ThemedCodeSample(props: CodeSampleProps) {
|
|
|
58
60
|
descriptionHead: props.descriptionHead,
|
|
59
61
|
descriptionContent: props.descriptionContent,
|
|
60
62
|
descriptionIcon: props.descriptionIcon,
|
|
63
|
+
markdownFormat: props.markdownFormat,
|
|
61
64
|
}}>
|
|
62
65
|
<Code.Pre
|
|
63
66
|
codeblock={highlighted[0]}
|
|
@@ -85,6 +88,7 @@ function $ThemedCodeSample(props: CodeSampleProps) {
|
|
|
85
88
|
descriptionHead: props.descriptionHead,
|
|
86
89
|
descriptionContent: props.descriptionContent,
|
|
87
90
|
descriptionIcon: props.descriptionIcon,
|
|
91
|
+
markdownFormat: props.markdownFormat,
|
|
88
92
|
}}>
|
|
89
93
|
<$CodeSampleTabs
|
|
90
94
|
description={props.description}
|
|
@@ -1,128 +1,143 @@
|
|
|
1
|
-
import React, { useState, useEffect } from "react";
|
|
2
|
-
import {Tabs as TabsPrimitive} from "radix-ui"; // TODO: remove and use separation
|
|
3
|
-
import {
|
|
4
|
-
HighlightedCode,
|
|
5
|
-
} from "codehike/code"
|
|
1
|
+
import React, { useState, useEffect, useContext } from "react";
|
|
2
|
+
import { Tabs as TabsPrimitive } from "radix-ui"; // TODO: remove and use separation
|
|
3
|
+
import { HighlightedCode } from "codehike/code";
|
|
6
4
|
|
|
7
|
-
import {
|
|
8
|
-
CodeCopy,
|
|
9
|
-
} from "../CodeCopy";
|
|
5
|
+
import { CodeCopy } from "../CodeCopy";
|
|
10
6
|
import * as cn from "./CodeTabs.styles"; // TODO: style by highlighted?
|
|
11
7
|
import { SyntaxHighlightedCode } from "../CodeTheme/CodeTheme";
|
|
12
8
|
import { useCodeSampleAnalytics } from "../CodeSample/CodeSampleAnalytics";
|
|
13
9
|
import { useUXEvents } from "../../uxsdk";
|
|
10
|
+
import { CodeContext } from "../CodeSample/CodeSample";
|
|
14
11
|
|
|
15
12
|
export interface CodeTabsProps {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
13
|
+
description: string;
|
|
14
|
+
highlighted: SyntaxHighlightedCode[];
|
|
15
|
+
className?: string;
|
|
16
|
+
controlByMeta?: boolean; // TODO: BETTER IN THE FUTURE
|
|
20
17
|
}
|
|
21
18
|
|
|
22
19
|
export function withCodeTabs(PreComponent) {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return null
|
|
48
|
-
}
|
|
20
|
+
return function CodeTabs(props: CodeTabsProps) {
|
|
21
|
+
const isSingle = props?.highlighted?.length === 1 && !props.description;
|
|
22
|
+
const defaultValue =
|
|
23
|
+
props.highlighted[0]?.meta || props.highlighted[0]?.lang;
|
|
24
|
+
const [activeTab, setActiveTab] = useState(defaultValue);
|
|
25
|
+
const {markdownFormat} = useContext(CodeContext);
|
|
26
|
+
|
|
27
|
+
const codeSampleAnalytics = useCodeSampleAnalytics();
|
|
28
|
+
const ux = useUXEvents();
|
|
29
|
+
|
|
30
|
+
// Reset active tab when highlighted prop changes
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
setActiveTab(defaultValue);
|
|
33
|
+
}, [defaultValue]);
|
|
34
|
+
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
codeSampleAnalytics.setActiveTab(activeTab);
|
|
37
|
+
}, []);
|
|
38
|
+
|
|
39
|
+
function changeTab(value: string) {
|
|
40
|
+
setActiveTab(value);
|
|
41
|
+
codeSampleAnalytics.setActiveTab(value);
|
|
42
|
+
ux.docs.code.tab_change({ tab: value });
|
|
43
|
+
}
|
|
49
44
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
part="root"
|
|
54
|
-
data-single={String(isSingle)}
|
|
55
|
-
data-nodescription={!props.description ? "true" : undefined}
|
|
56
|
-
className={`${cn.CodeTabsRoot}`}
|
|
57
|
-
style={props.highlighted[0]?.style}
|
|
58
|
-
value={activeTab}
|
|
59
|
-
onValueChange={changeTab}
|
|
60
|
-
>
|
|
61
|
-
<$LanguageTabSwitcher
|
|
62
|
-
description={props.description}
|
|
63
|
-
highlighted={props.highlighted}
|
|
64
|
-
/>
|
|
45
|
+
if (props?.highlighted?.length === 0) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
65
48
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
style={codeblock?.style || codeblock?.style}
|
|
70
|
-
codeblock={codeblock}
|
|
71
|
-
/>
|
|
72
|
-
</TabsPrimitive.Content>
|
|
73
|
-
))}
|
|
74
|
-
</TabsPrimitive.Root>
|
|
75
|
-
</xyd-codetabs>
|
|
76
|
-
)
|
|
49
|
+
let ContentRoot = TabsPrimitive.Content
|
|
50
|
+
if (markdownFormat) { // TODO: BETTER IN THE FUTURE
|
|
51
|
+
ContentRoot = React.Fragment
|
|
77
52
|
}
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<xyd-codetabs className={`${cn.CodeTabsHost} ${props.className || ""}`}>
|
|
56
|
+
<TabsPrimitive.Root
|
|
57
|
+
part="root"
|
|
58
|
+
data-single={String(isSingle)}
|
|
59
|
+
data-nodescription={!props.description ? "true" : undefined}
|
|
60
|
+
className={`${cn.CodeTabsRoot}`}
|
|
61
|
+
style={props.highlighted[0]?.style}
|
|
62
|
+
value={activeTab}
|
|
63
|
+
onValueChange={changeTab}
|
|
64
|
+
>
|
|
65
|
+
<$LanguageTabSwitcher
|
|
66
|
+
description={props.description}
|
|
67
|
+
highlighted={props.highlighted}
|
|
68
|
+
/>
|
|
69
|
+
|
|
70
|
+
{props.highlighted?.map((codeblock, i) => (
|
|
71
|
+
<ContentRoot
|
|
72
|
+
value={codeblock.meta || codeblock.lang}
|
|
73
|
+
key={i}
|
|
74
|
+
>
|
|
75
|
+
<PreComponent
|
|
76
|
+
style={codeblock?.style || codeblock?.style}
|
|
77
|
+
codeblock={codeblock}
|
|
78
|
+
/>
|
|
79
|
+
</ContentRoot>
|
|
80
|
+
))}
|
|
81
|
+
</TabsPrimitive.Root>
|
|
82
|
+
</xyd-codetabs>
|
|
83
|
+
);
|
|
84
|
+
};
|
|
78
85
|
}
|
|
79
86
|
|
|
80
87
|
interface LanguageTabSwitcherProps {
|
|
81
|
-
|
|
82
|
-
|
|
88
|
+
description: string;
|
|
89
|
+
highlighted: HighlightedCode[];
|
|
83
90
|
}
|
|
84
91
|
|
|
85
92
|
function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
93
|
+
const isSingle = props?.highlighted?.length === 1 && !props.description;
|
|
94
|
+
|
|
95
|
+
const highlighted = props.highlighted.filter(
|
|
96
|
+
(item, index, self) =>
|
|
97
|
+
index ===
|
|
98
|
+
self.findIndex((t) => (t.meta || t.lang) === (item.meta || item.lang))
|
|
99
|
+
);
|
|
100
|
+
return (
|
|
101
|
+
<xyd-codetabs-languages
|
|
102
|
+
data-single={String(isSingle)}
|
|
103
|
+
className={`
|
|
94
104
|
${cn.CodeTabsLanguagesHost}
|
|
95
|
-
`}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
{props.description}
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
<TabsPrimitive.List part="languages-list">
|
|
106
|
-
{highlighted?.map(({ meta, lang }, i) => {
|
|
107
|
-
if (isSingle) {
|
|
108
|
-
return null
|
|
109
|
-
}
|
|
110
|
-
return <TabsPrimitive.Trigger
|
|
111
|
-
part="language-trigger"
|
|
112
|
-
value={meta || lang}
|
|
113
|
-
key={i}
|
|
114
|
-
>
|
|
115
|
-
{meta || lang}
|
|
116
|
-
</TabsPrimitive.Trigger>
|
|
117
|
-
})}
|
|
118
|
-
</TabsPrimitive.List>
|
|
119
|
-
|
|
120
|
-
<div part="copy">
|
|
121
|
-
{highlighted?.map((codeblock, i) => (
|
|
122
|
-
<TabsPrimitive.Content value={codeblock.meta || codeblock.lang} asChild key={i}>
|
|
123
|
-
<CodeCopy text={codeblock.value} />
|
|
124
|
-
</TabsPrimitive.Content>
|
|
125
|
-
))}
|
|
105
|
+
`}
|
|
106
|
+
>
|
|
107
|
+
{props.description && (
|
|
108
|
+
<div part="description">
|
|
109
|
+
<div part="description-item">{props.description}</div>
|
|
126
110
|
</div>
|
|
111
|
+
)}
|
|
112
|
+
|
|
113
|
+
<TabsPrimitive.List part="languages-list">
|
|
114
|
+
{highlighted?.map(({ meta, lang }, i) => {
|
|
115
|
+
if (isSingle) {
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
118
|
+
return (
|
|
119
|
+
<TabsPrimitive.Trigger
|
|
120
|
+
part="language-trigger"
|
|
121
|
+
value={meta || lang}
|
|
122
|
+
key={i}
|
|
123
|
+
>
|
|
124
|
+
{meta || lang}
|
|
125
|
+
</TabsPrimitive.Trigger>
|
|
126
|
+
);
|
|
127
|
+
})}
|
|
128
|
+
</TabsPrimitive.List>
|
|
129
|
+
|
|
130
|
+
<div part="copy">
|
|
131
|
+
{highlighted?.map((codeblock, i) => (
|
|
132
|
+
<TabsPrimitive.Content
|
|
133
|
+
value={codeblock.meta || codeblock.lang}
|
|
134
|
+
asChild
|
|
135
|
+
key={i}
|
|
136
|
+
>
|
|
137
|
+
<CodeCopy text={codeblock.value} />
|
|
138
|
+
</TabsPrimitive.Content>
|
|
139
|
+
))}
|
|
140
|
+
</div>
|
|
127
141
|
</xyd-codetabs-languages>
|
|
142
|
+
);
|
|
128
143
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"_rollupPluginBabelHelpers-iq1gUDHm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|