tycho-components 0.23.2 → 0.23.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/configs/tour/driverTour.js +86 -9
  2. package/dist/shell/Header/HelpButton/HelpModal.js +24 -16
  3. package/package.json +1 -1
package/dist/configs/tour/driverTour.js CHANGED
@@ -2,6 +2,33 @@ import { driver } from 'driver.js';
2
2
  import { resolveAnchor, resolveAnchorById, waitForSelector, } from './anchorResolver';
3
3
  import { buildAnchorMap, flattenWorkflowSteps, getWorkflowsForPath, } from './knowledgeBase';
4
4
  const CLICK_DEMO_DELAY_MS = 300;
5
+ const DRIVER_TRANSITION_MS = 400;
6
+ function isDummyHighlightElement(element) {
7
+ return !element || element.id === 'driver-dummy-element';
8
+ }
9
+ function waitForDriverTransition(driver) {
10
+ return new Promise((resolve) => {
11
+ const deadline = Date.now() + DRIVER_TRANSITION_MS + 50;
12
+ const poll = () => {
13
+ const state = driver.getState();
14
+ if (!state.__transitionCallback || Date.now() >= deadline) {
15
+ resolve();
16
+ return;
17
+ }
18
+ window.requestAnimationFrame(poll);
19
+ };
20
+ poll();
21
+ });
22
+ }
23
+ function rehighlightStepElement(driver, step, element) {
24
+ driver.highlight({
25
+ element,
26
+ popover: step.popover,
27
+ onHighlighted: step.onHighlighted,
28
+ onDeselected: step.onDeselected,
29
+ disableActiveInteraction: step.disableActiveInteraction,
30
+ });
31
+ }
5
32
  function isPanelOpen(panelSelector) {
6
33
  return Boolean(document.querySelector(panelSelector));
7
34
  }
@@ -44,13 +71,16 @@ function chainPopoverClick(driveStep, key, beforeAdvance, advance) {
44
71
  const popover = driveStep.popover ?? {};
45
72
  const existing = popover[key];
46
73
  const handler = (element, step, opts) => {
47
- beforeAdvance();
48
- if (existing) {
49
- existing(element, step, opts);
50
- }
51
- else {
52
- advance(opts);
53
- }
74
+ void (async () => {
75
+ beforeAdvance();
76
+ await waitForDriverTransition(opts.driver);
77
+ if (existing) {
78
+ existing(element, step, opts);
79
+ }
80
+ else {
81
+ advance(opts);
82
+ }
83
+ })();
54
84
  };
55
85
  driveStep.popover = {
56
86
  ...popover,
@@ -69,16 +99,51 @@ function attachClickDemoHooks(driveStep, anchor, anchorMap, anchorFallbacks) {
69
99
  };
70
100
  chainPopoverClick(driveStep, 'onPrevClick', () => closeGuardPanel(anchor.guardClickPanel, anchorMap, anchorFallbacks), (opts) => opts.driver.movePrevious());
71
101
  }
102
+ async function openPanelIfNeeded(panelAnchor, anchorMap, anchorFallbacks) {
103
+ const { panelSelector, triggerAnchor } = panelAnchor;
104
+ if (!panelSelector || !triggerAnchor)
105
+ return;
106
+ if (!isPanelOpen(panelSelector)) {
107
+ clickElement(resolveAnchorById(triggerAnchor, anchorMap, anchorFallbacks) ?? undefined);
108
+ }
109
+ await waitForSelector(panelSelector);
110
+ }
111
+ function attachPreOpenPanelOnNext(driveStep, panelAnchor, anchorMap, anchorFallbacks) {
112
+ const popover = driveStep.popover ?? {};
113
+ const existing = popover.onNextClick;
114
+ const handler = (element, step, opts) => {
115
+ void (async () => {
116
+ await openPanelIfNeeded(panelAnchor, anchorMap, anchorFallbacks);
117
+ await waitForDriverTransition(opts.driver);
118
+ if (existing) {
119
+ existing(element, step, opts);
120
+ }
121
+ else {
122
+ opts.driver.moveNext();
123
+ }
124
+ })();
125
+ };
126
+ driveStep.popover = {
127
+ ...popover,
128
+ onNextClick: handler,
129
+ };
130
+ }
72
131
  function attachPanelStepHooks(driveStep, anchor, anchorMap, anchorFallbacks) {
73
132
  const { panelSelector, triggerAnchor } = anchor;
74
133
  if (!panelSelector || !triggerAnchor)
75
134
  return;
76
135
  driveStep.element = () => resolveAnchor(anchor, anchorFallbacks);
77
- driveStep.onHighlightStarted = async (_element, _step, opts) => {
136
+ driveStep.onHighlightStarted = async (element, step, opts) => {
78
137
  if (!isPanelOpen(panelSelector)) {
79
138
  clickElement(resolveAnchorById(triggerAnchor, anchorMap, anchorFallbacks) ?? undefined);
80
139
  }
81
140
  await waitForSelector(panelSelector);
141
+ const resolved = resolveAnchor(anchor, anchorFallbacks);
142
+ if (resolved && isDummyHighlightElement(element)) {
143
+ rehighlightStepElement(opts.driver, step, resolved);
144
+ return;
145
+ }
146
+ await waitForDriverTransition(opts.driver);
82
147
  opts.driver.refresh();
83
148
  };
84
149
  const close = () => closePanel(anchor, anchorMap, anchorFallbacks);
@@ -89,7 +154,7 @@ export function buildDriveSteps(kb, pathnames, anchorFallbacks) {
89
154
  const workflows = getWorkflowsForPath(kb, pathnames);
90
155
  const steps = flattenWorkflowSteps(workflows);
91
156
  const anchorMap = buildAnchorMap(kb);
92
- return steps.map((step) => {
157
+ const driveSteps = steps.map((step) => {
93
158
  const driveStep = {
94
159
  popover: {
95
160
  title: step.title,
@@ -121,6 +186,18 @@ export function buildDriveSteps(kb, pathnames, anchorFallbacks) {
121
186
  }
122
187
  return driveStep;
123
188
  });
189
+ for (let i = 0; i < steps.length - 1; i++) {
190
+ const nextStep = steps[i + 1];
191
+ if (!nextStep.anchor)
192
+ continue;
193
+ const nextAnchor = anchorMap.get(nextStep.anchor);
194
+ if (!nextAnchor?.resolveAtHighlight || !nextAnchor.triggerAnchor)
195
+ continue;
196
+ if (steps[i].anchor !== nextAnchor.triggerAnchor)
197
+ continue;
198
+ attachPreOpenPanelOnNext(driveSteps[i], nextAnchor, anchorMap, anchorFallbacks);
199
+ }
200
+ return driveSteps;
124
201
  }
125
202
  export function hasMatchingWorkflow(kb, pathnames) {
126
203
  return getWorkflowsForPath(kb, pathnames).length > 0;
package/dist/shell/Header/HelpButton/HelpModal.js CHANGED
@@ -15,30 +15,30 @@ export default function HelpModal({ onClose, helpActions = [] }) {
15
15
  const { t } = useTranslation('help');
16
16
  const { turnOn, turnOff, status } = useTourUtils();
17
17
  const { getLogged, setLogged } = useLoggedUtils();
18
+ const [autoOpenEnabled, setAutoOpenEnabled] = useState(() => getLogged()?.liveTour ?? false);
18
19
  const [updatingLiveTour, setUpdatingLiveTour] = useState(false);
19
20
  const isTourActive = status();
20
- const isAutoOpenEnabled = getLogged()?.liveTour ?? false;
21
21
  const handleTutorials = () => {
22
22
  const origin = (import.meta.env.VITE_APP_ORIGIN ?? '').replace(/\/+$/, '');
23
23
  window.open(`${origin}/home/tutorials`, '_blank');
24
24
  };
25
25
  const handleTourToggle = () => {
26
- if (isTourActive) {
27
- turnOff();
26
+ const startTour = () => {
27
+ if (isTourActive) {
28
+ turnOff();
29
+ }
30
+ else {
31
+ turnOn();
32
+ }
33
+ onClose();
34
+ };
35
+ const currentLiveTour = getLogged()?.liveTour ?? false;
36
+ if (autoOpenEnabled === currentLiveTour) {
37
+ startTour();
38
+ return;
28
39
  }
29
- else {
30
- turnOn();
31
- }
32
- onClose();
33
- };
34
- const handleCustomAction = (item) => {
35
- item.action();
36
- onClose();
37
- };
38
- const handleAutoOpenToggle = (event) => {
39
- const checked = event.target.checked;
40
40
  setUpdatingLiveTour(true);
41
- ProfileService.updateLiveTour(checked)
41
+ ProfileService.updateLiveTour(autoOpenEnabled)
42
42
  .then((response) => {
43
43
  CookieStorage.setJwtToken(response.data);
44
44
  setLogged(SecurityUtils.parseJwt(response.data));
@@ -48,8 +48,16 @@ export default function HelpModal({ onClose, helpActions = [] }) {
48
48
  })
49
49
  .finally(() => {
50
50
  setUpdatingLiveTour(false);
51
+ startTour();
51
52
  });
52
53
  };
54
+ const handleCustomAction = (item) => {
55
+ item.action();
56
+ onClose();
57
+ };
58
+ const handleAutoOpenChange = (event) => {
59
+ setAutoOpenEnabled(event.target.checked);
60
+ };
53
61
  const actionItems = [
54
62
  {
55
63
  title: t('title.tutorials'),
@@ -58,5 +66,5 @@ export default function HelpModal({ onClose, helpActions = [] }) {
58
66
  },
59
67
  ...helpActions,
60
68
  ];
61
- return (_jsxs(AppModal, { title: t('modal.title'), close: onClose, hideFooter: true, className: "help-modal", children: [_jsxs("div", { className: "live-tour", children: [_jsx(AppPicture, { src: liveTour }), _jsxs("div", { className: "tour-content", children: [_jsx("div", { className: "title", children: t('title.tour') }), _jsx("div", { className: "desc", children: t('description.tour') }), _jsxs("label", { className: "help-checkbox-label", children: [_jsx("input", { type: "checkbox", checked: isAutoOpenEnabled, onChange: handleAutoOpenToggle, disabled: updatingLiveTour, className: "help-checkbox" }), _jsx("span", { children: t('checkbox.autoOpen') })] }), _jsx(Button, { text: t('button.tour'), size: "small", icon: "keyboard_arrow_right", onClick: handleTourToggle })] })] }), _jsx("div", { className: "other-actions", children: actionItems.map((item, idx) => (_jsxs("div", { className: "item", children: [_jsx("div", { className: "title", children: item.title }), _jsx("div", { className: "desc", children: item.desc }), _jsx(Button, { text: t('button.open'), size: "x-small", mode: "outlined", icon: "keyboard_arrow_right", onClick: () => handleCustomAction(item) })] }, idx))) })] }));
69
+ return (_jsxs(AppModal, { title: t('modal.title'), close: onClose, hideFooter: true, className: "help-modal", children: [_jsxs("div", { className: "live-tour", children: [_jsx(AppPicture, { src: liveTour }), _jsxs("div", { className: "tour-content", children: [_jsx("div", { className: "title", children: t('title.tour') }), _jsx("div", { className: "desc", children: t('description.tour') }), _jsxs("label", { className: "help-checkbox-label", children: [_jsx("input", { type: "checkbox", checked: autoOpenEnabled, onChange: handleAutoOpenChange, disabled: updatingLiveTour, className: "help-checkbox" }), _jsx("span", { children: t('checkbox.autoOpen') })] }), _jsx(Button, { text: t('button.tour'), size: "small", icon: "keyboard_arrow_right", onClick: handleTourToggle, disabled: updatingLiveTour })] })] }), _jsx("div", { className: "other-actions", children: actionItems.map((item, idx) => (_jsxs("div", { className: "item", children: [_jsx("div", { className: "title", children: item.title }), _jsx("div", { className: "desc", children: item.desc }), _jsx(Button, { text: t('button.open'), size: "x-small", mode: "outlined", icon: "keyboard_arrow_right", onClick: () => handleCustomAction(item) })] }, idx))) })] }));
62
70
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "tycho-components",
3
3
  "private": false,
4
- "version": "0.23.2",
4
+ "version": "0.23.4",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {