Skip to content

Commit 6dd8fd3

Browse files
ChrisUserChrisUser
committed
Initial commit
1 parent 89008ce commit 6dd8fd3

35 files changed

+4201
-0
lines changed

‎.eslintrc.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
module.exports = {
2+
parser: '@typescript-eslint/parser',
3+
extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
4+
plugins: ['@typescript-eslint', 'react-hooks', 'prettier'],
5+
parserOptions: {
6+
ecmaVersion: 2018,
7+
sourceType: 'module',
8+
ecmaFeatures: {
9+
jsx: true
10+
}
11+
},
12+
env: {
13+
browser: true,
14+
node: true,
15+
es6: true,
16+
jest: true
17+
},
18+
rules: {
19+
"no-control-regex": 0,
20+
'no-undef': 0,
21+
'no-unused-vars': 'off',
22+
'react/prop-types': 0,
23+
'@typescript-eslint/camelcase': 0,
24+
'@typescript-eslint/no-unused-vars': 1,
25+
'@typescript-eslint/no-use-before-define': 0,
26+
'@typescript-eslint/ban-ts-comment': 0,
27+
'@typescript-eslint/ban-ts-ignore': 0,
28+
'@typescript-eslint/explicit-member-accessibility': 0,
29+
'@typescript-eslint/member-delimiter-style': 0,
30+
'@typescript-eslint/no-empty-function': 0,
31+
'@typescript-eslint/no-explicit-any': 0,
32+
'@typescript-eslint/no-non-null-assertion': 'off',
33+
'react-hooks/rules-of-hooks': 'error',
34+
'react-hooks/exhaustive-deps': 'warn'
35+
},
36+
settings: {
37+
react: {
38+
version: 'detect'
39+
}
40+
}
41+
}

‎.gitignore

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
5+
/node_modules
6+
/.pnp
7+
.pnp.js
8+
9+
# testing
10+
11+
/coverage
12+
13+
# production
14+
15+
/build
16+
17+
# misc
18+
19+
.eslintcache
20+
.DS_Store
21+
.env.local
22+
.env.development.local
23+
.env.test.local
24+
.env.production.local
25+
26+
npm-debug.log*
27+
yarn-debug.log*
28+
yarn-error.log\*

‎.prettierrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"printWidth": 160,
3+
"tabWidth": 4,
4+
"singleQuote": true,
5+
"semi": false,
6+
"trailingComma": "none",
7+
"bracketSpacing": true
8+
}

‎dist/OnboardingStepSpotlight/OnboardingStepSpotlight.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
interface Props {
3+
bounds: DOMRect;
4+
targetRef?: React.MutableRefObject<HTMLDivElement | null>;
5+
beforeFocusAnimationEnd?: () => void;
6+
onFocusAnimationEnd?: () => void;
7+
}
8+
declare const OnboardingStepSpotlight: React.FC<Props>;
9+
export default OnboardingStepSpotlight;

‎dist/OnboardingWizard/OnboardingWizard.d.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { ReactNode } from 'react';
2+
import { OnboardingStep } from '../types';
3+
interface Props {
4+
onboardingSteps: OnboardingStep[];
5+
modalTitle?: string;
6+
displayDots?: boolean;
7+
darkMode?: boolean;
8+
nextButtonLabel?: string;
9+
nextButtonIcon?: ReactNode;
10+
closeButtonLabel?: string;
11+
closeButtonIcon?: ReactNode;
12+
completeButtonLabel?: string;
13+
completeButtonIcon?: ReactNode;
14+
onStepChange?: (newStepIndex: number) => void;
15+
onClose?: (currentStepIndex: number) => void;
16+
onComplete?: () => void;
17+
}
18+
declare const OnboardingWizard: React.FC<Props>;
19+
export default OnboardingWizard;

‎dist/StickyOnboardingWizard/StickyOnboardingWizard.d.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { ReactNode } from 'react';
2+
import { OnboardingStep } from '../types';
3+
interface Props {
4+
bounds: DOMRect;
5+
onboardingSteps: OnboardingStep[];
6+
modalTitle?: string;
7+
darkMode?: boolean;
8+
nextButtonLabel?: string;
9+
nextButtonIcon?: ReactNode;
10+
closeButtonLabel?: string;
11+
closeButtonIcon?: ReactNode;
12+
completeButtonLabel?: string;
13+
completeButtonIcon?: ReactNode;
14+
onStepChange?: (newStepIndex: number) => void;
15+
onClose?: (currentStepIndex: number) => void;
16+
onComplete?: () => void;
17+
}
18+
declare const StickyOnboardingWizard: React.FC<Props>;
19+
export default StickyOnboardingWizard;

‎dist/main.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { default as OnboardingStepSpotlight } from './OnboardingStepSpotlight/OnboardingStepSpotlight';
2+
export { default as OnboardingWizard } from './OnboardingWizard/OnboardingWizard';
3+
export { default as StickyOnboardingWizard } from './StickyOnboardingWizard/StickyOnboardingWizard';

‎dist/main.js

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import { jsx as e, jsxs as m } from "react/jsx-runtime";
2+
import { useCallback as S, useEffect as C, useState as O, useRef as D, useMemo as $ } from "react";
3+
const H = ({ bounds: t, targetRef: a, beforeFocusAnimationEnd: l, onFocusAnimationEnd: c }) => {
4+
const g = S(() => {
5+
var w;
6+
if (l && l(), t.height === 0 || t.width === 0)
7+
return;
8+
t.bottom > window.innerHeight && (a != null && a.current) && ((w = a.current) == null || w.scrollIntoView({ behavior: "smooth" }));
9+
const u = setTimeout(() => {
10+
c && c();
11+
}, 500);
12+
return () => clearTimeout(u);
13+
}, [t, a, c, l]);
14+
return C(() => {
15+
g();
16+
}, [g]), /* @__PURE__ */ e("div", { "data-testid": "spotlight-wrapper", className: "rwo-onboarding-step-spotlight-wrapper", children: /* @__PURE__ */ e(
17+
"div",
18+
{
19+
"data-testid": "spotlight",
20+
className: "rwo-onboarding-step-spotlight is-visible",
21+
style: { width: t.width, height: t.height, transform: `translate3d(${t.x}px, ${t.y}px, 0px)` }
22+
}
23+
) });
24+
}, V = H;
25+
const M = ({
26+
onboardingSteps: t,
27+
modalTitle: a = "Tutorial",
28+
displayDots: l,
29+
darkMode: c,
30+
nextButtonLabel: g = "Next",
31+
nextButtonIcon: u,
32+
closeButtonLabel: w = "Close",
33+
closeButtonIcon: f,
34+
completeButtonLabel: y = "Done",
35+
completeButtonIcon: k,
36+
onStepChange: s,
37+
onClose: _,
38+
onComplete: x
39+
}) => {
40+
const [i, v] = O(0), h = S(() => {
41+
_ && _(i);
42+
}, [i, _]);
43+
if (!(!t || t.length === 0))
44+
return /* @__PURE__ */ e("div", { className: "rwo-onboarding-wizard-wrapper", children: /* @__PURE__ */ m("div", { "data-testid": "wizard", className: `rwo-onboarding-modal ${c ? "dark" : "light"}-modal`, children: [
45+
/* @__PURE__ */ m("div", { className: "rwo-onboarding-modal__header", children: [
46+
/* @__PURE__ */ e("div", { className: "rwo-onboarding-modal__header__left-section", children: /* @__PURE__ */ e("button", { className: "rwo-ghost-action-button", onClick: h, children: f || w }) }),
47+
/* @__PURE__ */ e("div", { className: "rwo-onboarding-modal__header__middle-section", children: /* @__PURE__ */ e("span", { className: "rwo-modal-title", children: a }) }),
48+
/* @__PURE__ */ e("div", { className: "rwo-onboarding-modal__header__right-section", children: i === t.length - 1 ? /* @__PURE__ */ e("button", { className: "rwo-ghost-action-button", onClick: () => x ? x() : null, children: k || y }) : /* @__PURE__ */ e(
49+
"button",
50+
{
51+
className: "rwo-ghost-action-button",
52+
onClick: () => {
53+
const N = i + 1;
54+
v(N), s && s(N);
55+
},
56+
children: u || g
57+
}
58+
) })
59+
] }),
60+
/* @__PURE__ */ m("div", { className: "rwo-onboarding-modal__body", children: [
61+
t[i].image && /* @__PURE__ */ e("div", { className: "rwo-onboarding-modal__body__image-container", children: /* @__PURE__ */ e("img", { src: t[i].image, alt: t[i].text }) }),
62+
/* @__PURE__ */ e("div", { className: "rwo-onboarding-modal__body__text-container", children: t[i].text })
63+
] }),
64+
l && /* @__PURE__ */ e("div", { className: "rwo-onboarding-modal__footer", children: /* @__PURE__ */ e("div", { className: "rwo-onboarding-modal-step-dot-container", children: t.map((N, o) => /* @__PURE__ */ e(
65+
"div",
66+
{
67+
className: `rwo-onboarding-modal-step-dot ${i === o ? "is-active" : ""}`,
68+
onClick: () => {
69+
v(o), s && s(o);
70+
}
71+
},
72+
o
73+
)) }) })
74+
] }) });
75+
}, q = M;
76+
var r = /* @__PURE__ */ ((t) => (t.Top = "Top", t.Bottom = "Bottom", t.Left = "Left", t.Right = "Right", t.Center = "Center", t))(r || {});
77+
const d = 12, R = ({
78+
bounds: t,
79+
onboardingSteps: a,
80+
modalTitle: l = "Tutorial",
81+
darkMode: c,
82+
nextButtonLabel: g = "Next",
83+
nextButtonIcon: u,
84+
closeButtonLabel: w = "Close",
85+
closeButtonIcon: f,
86+
completeButtonLabel: y = "Done",
87+
completeButtonIcon: k,
88+
onStepChange: s,
89+
onClose: _,
90+
onComplete: x
91+
}) => {
92+
const [i, v] = O(new DOMRect()), [h, N] = O(0), o = D(null), b = $(() => a, [a]);
93+
C(() => {
94+
!o || !o.current || v(o.current.getBoundingClientRect());
95+
}, [t.x, t.y, t.width, t.height, o.current]);
96+
const z = $(() => {
97+
const n = window.innerWidth - (t.x + t.width), p = window.innerHeight - (t.y + t.height);
98+
return i.height + d <= t.y ? r.Top : i.width + d <= t.x ? r.Left : i.width + d <= n ? r.Right : i.height + d <= p ? r.Bottom : r.Center;
99+
}, [i, t]), W = $(() => {
100+
const { x: n, y: p, width: B, height: I } = t, { width: T, height: L } = i;
101+
switch (z) {
102+
case r.Top:
103+
return `translate3d(${n || 0}px, ${Math.abs(p - L - d)}px, 0px)`;
104+
case r.Left:
105+
return `translate3d(${Math.abs(n - T - d)}px, ${p || 0}px, 0px)`;
106+
case r.Right:
107+
return `translate3d(${n + B + d}px, ${p || 0}px, 0px)`;
108+
case r.Bottom:
109+
return `translate3d(${n || 0}px, ${p + I + d}px, 0px)`;
110+
case r.Center:
111+
default:
112+
return "translate3d(50vw, 50vh, 0px)";
113+
}
114+
}, [i, t]);
115+
if (!(!b || b.length === 0))
116+
return /* @__PURE__ */ e("div", { className: "rwo-onboarding-wizard-wrapper", children: /* @__PURE__ */ m(
117+
"div",
118+
{
119+
role: "dialog",
120+
className: `rwo-sticky-onboarding-modal ${c ? "dark" : "light"}-modal ${z}--position-modal`,
121+
ref: o,
122+
style: {
123+
transform: W
124+
},
125+
children: [
126+
/* @__PURE__ */ m("div", { className: "rwo-sticky-onboarding-modal__header", children: [
127+
/* @__PURE__ */ e("div", { className: "rwo-sticky-onboarding-modal__header__left-section", children: /* @__PURE__ */ e("span", { className: "rwo-modal-title", children: l }) }),
128+
/* @__PURE__ */ e("div", { className: "rwo-sticky-onboarding-modal__header__right-section", children: /* @__PURE__ */ m("span", { className: "rwo-modal-step-counter", children: [
129+
h + 1,
130+
" / ",
131+
b.length
132+
] }) })
133+
] }),
134+
/* @__PURE__ */ e("div", { className: "rwo-sticky-onboarding-modal__body", children: /* @__PURE__ */ e("div", { className: "rwo-sticky-onboarding-modal__body__text-container", children: b[h].text }) }),
135+
/* @__PURE__ */ m("div", { className: "rwo-sticky-onboarding-modal__footer", children: [
136+
/* @__PURE__ */ e("div", { className: "rwo-sticky-onboarding-modal__footer__left-section", children: /* @__PURE__ */ e("button", { className: "rwo-ghost-action-button", onClick: () => _ ? _(h) : null, children: f || w }) }),
137+
/* @__PURE__ */ e("div", { className: "rwo-sticky-onboarding-modal__footer__right-section", children: h === b.length - 1 ? /* @__PURE__ */ e("button", { className: "rwo-ghost-action-button", onClick: () => x ? x() : null, children: k || y }) : /* @__PURE__ */ e(
138+
"button",
139+
{
140+
className: "rwo-ghost-action-button",
141+
onClick: () => {
142+
const n = h + 1;
143+
N(n), s && s(n);
144+
},
145+
children: u || g
146+
}
147+
) })
148+
] })
149+
]
150+
}
151+
) });
152+
}, G = R;
153+
export {
154+
V as OnboardingStepSpotlight,
155+
q as OnboardingWizard,
156+
G as StickyOnboardingWizard
157+
};

‎dist/main.umd.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a["react-wizard-onboarding"]={},a.jsxRuntime,a.React))})(this,function(a,t,o){"use strict";const M="",O=({bounds:e,targetRef:n,beforeFocusAnimationEnd:c,onFocusAnimationEnd:h})=>{const m=o.useCallback(()=>{var p;if(c&&c(),e.height===0||e.width===0)return;e.bottom>window.innerHeight&&(n!=null&&n.current)&&((p=n.current)==null||p.scrollIntoView({behavior:"smooth"}));const b=setTimeout(()=>{h&&h()},500);return()=>clearTimeout(b)},[e,n,h,c]);return o.useEffect(()=>{m()},[m]),t.jsx("div",{"data-testid":"spotlight-wrapper",className:"rwo-onboarding-step-spotlight-wrapper",children:t.jsx("div",{"data-testid":"spotlight",className:"rwo-onboarding-step-spotlight is-visible",style:{width:e.width,height:e.height,transform:`translate3d(${e.x}px, ${e.y}px, 0px)`}})})},D="",z=({onboardingSteps:e,modalTitle:n="Tutorial",displayDots:c,darkMode:h,nextButtonLabel:m="Next",nextButtonIcon:b,closeButtonLabel:p="Close",closeButtonIcon:k,completeButtonLabel:u="Done",completeButtonIcon:$,onStepChange:g,onClose:_,onComplete:x})=>{const[r,y]=o.useState(0),w=o.useCallback(()=>{_&&_(r)},[r,_]);if(!(!e||e.length===0))return t.jsx("div",{className:"rwo-onboarding-wizard-wrapper",children:t.jsxs("div",{"data-testid":"wizard",className:`rwo-onboarding-modal ${h?"dark":"light"}-modal`,children:[t.jsxs("div",{className:"rwo-onboarding-modal__header",children:[t.jsx("div",{className:"rwo-onboarding-modal__header__left-section",children:t.jsx("button",{className:"rwo-ghost-action-button",onClick:w,children:k||p})}),t.jsx("div",{className:"rwo-onboarding-modal__header__middle-section",children:t.jsx("span",{className:"rwo-modal-title",children:n})}),t.jsx("div",{className:"rwo-onboarding-modal__header__right-section",children:r===e.length-1?t.jsx("button",{className:"rwo-ghost-action-button",onClick:()=>x?x():null,children:$||u}):t.jsx("button",{className:"rwo-ghost-action-button",onClick:()=>{const N=r+1;y(N),g&&g(N)},children:b||m})})]}),t.jsxs("div",{className:"rwo-onboarding-modal__body",children:[e[r].image&&t.jsx("div",{className:"rwo-onboarding-modal__body__image-container",children:t.jsx("img",{src:e[r].image,alt:e[r].text})}),t.jsx("div",{className:"rwo-onboarding-modal__body__text-container",children:e[r].text})]}),c&&t.jsx("div",{className:"rwo-onboarding-modal__footer",children:t.jsx("div",{className:"rwo-onboarding-modal-step-dot-container",children:e.map((N,d)=>t.jsx("div",{className:`rwo-onboarding-modal-step-dot ${r===d?"is-active":""}`,onClick:()=>{y(d),g&&g(d)}},d))})})]})})},q="";var i=(e=>(e.Top="Top",e.Bottom="Bottom",e.Left="Left",e.Right="Right",e.Center="Center",e))(i||{});const s=12,W=({bounds:e,onboardingSteps:n,modalTitle:c="Tutorial",darkMode:h,nextButtonLabel:m="Next",nextButtonIcon:b,closeButtonLabel:p="Close",closeButtonIcon:k,completeButtonLabel:u="Done",completeButtonIcon:$,onStepChange:g,onClose:_,onComplete:x})=>{const[r,y]=o.useState(new DOMRect),[w,N]=o.useState(0),d=o.useRef(null),v=o.useMemo(()=>n,[n]);o.useEffect(()=>{!d||!d.current||y(d.current.getBoundingClientRect())},[e.x,e.y,e.width,e.height,d.current]);const S=o.useMemo(()=>{const l=window.innerWidth-(e.x+e.width),f=window.innerHeight-(e.y+e.height);return r.height+s<=e.y?i.Top:r.width+s<=e.x?i.Left:r.width+s<=l?i.Right:r.height+s<=f?i.Bottom:i.Center},[r,e]),C=o.useMemo(()=>{const{x:l,y:f,width:T,height:B}=e,{width:I,height:j}=r;switch(S){case i.Top:return`translate3d(${l||0}px, ${Math.abs(f-j-s)}px, 0px)`;case i.Left:return`translate3d(${Math.abs(l-I-s)}px, ${f||0}px, 0px)`;case i.Right:return`translate3d(${l+T+s}px, ${f||0}px, 0px)`;case i.Bottom:return`translate3d(${l||0}px, ${f+B+s}px, 0px)`;case i.Center:default:return"translate3d(50vw, 50vh, 0px)"}},[r,e]);if(!(!v||v.length===0))return t.jsx("div",{className:"rwo-onboarding-wizard-wrapper",children:t.jsxs("div",{role:"dialog",className:`rwo-sticky-onboarding-modal ${h?"dark":"light"}-modal ${S}--position-modal`,ref:d,style:{transform:C},children:[t.jsxs("div",{className:"rwo-sticky-onboarding-modal__header",children:[t.jsx("div",{className:"rwo-sticky-onboarding-modal__header__left-section",children:t.jsx("span",{className:"rwo-modal-title",children:c})}),t.jsx("div",{className:"rwo-sticky-onboarding-modal__header__right-section",children:t.jsxs("span",{className:"rwo-modal-step-counter",children:[w+1," / ",v.length]})})]}),t.jsx("div",{className:"rwo-sticky-onboarding-modal__body",children:t.jsx("div",{className:"rwo-sticky-onboarding-modal__body__text-container",children:v[w].text})}),t.jsxs("div",{className:"rwo-sticky-onboarding-modal__footer",children:[t.jsx("div",{className:"rwo-sticky-onboarding-modal__footer__left-section",children:t.jsx("button",{className:"rwo-ghost-action-button",onClick:()=>_?_(w):null,children:k||p})}),t.jsx("div",{className:"rwo-sticky-onboarding-modal__footer__right-section",children:w===v.length-1?t.jsx("button",{className:"rwo-ghost-action-button",onClick:()=>x?x():null,children:$||u}):t.jsx("button",{className:"rwo-ghost-action-button",onClick:()=>{const l=w+1;N(l),g&&g(l)},children:b||m})})]})]})})},V="";a.OnboardingStepSpotlight=O,a.OnboardingWizard=z,a.StickyOnboardingWizard=W,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

0 commit comments

Comments
 (0)