@storybook/addon-onboarding 0.0.16 → 0.0.17--canary.33.d89e7e5.0
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/dist/manager.js +195 -71
- package/dist/manager.js.map +1 -1
- package/dist/manager.mjs +191 -68
- package/dist/manager.mjs.map +1 -1
- package/package.json +6 -4
package/dist/manager.mjs
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import e, { lazy, Suspense, useState, useCallback, useEffect, forwardRef, useMemo, Fragment } from 'react';
|
|
2
|
+
import Wo from 'react-confetti';
|
|
3
3
|
import { ThemeProvider, ensure, themes, styled, keyframes, css } from '@storybook/theming';
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { CURRENT_STORY_WAS_SET, STORY_CHANGED, STORY_ARGS_UPDATED } from '@storybook/core-events';
|
|
7
|
-
import * as
|
|
8
|
-
import { Icons } from '@storybook/components';
|
|
4
|
+
import We, { createPortal } from 'react-dom';
|
|
5
|
+
import Yo, { STATUS } from 'react-joyride';
|
|
6
|
+
import { CURRENT_STORY_WAS_SET, STORY_CHANGED, STORY_ARGS_UPDATED, STORY_INDEX_INVALIDATED, STORY_RENDERED } from '@storybook/core-events';
|
|
7
|
+
import * as g from '@radix-ui/react-dialog';
|
|
8
|
+
import { Icons, SyntaxHighlighter } from '@storybook/components';
|
|
9
|
+
import { motion } from 'framer-motion';
|
|
10
|
+
import ke from 'react-use-measure';
|
|
9
11
|
import { addons } from '@storybook/manager-api';
|
|
10
12
|
|
|
11
|
-
var
|
|
13
|
+
var Lo=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var zo=(t,o)=>{for(var n in o)Lo(t,n,{get:o[n],enumerable:!0});};function V({targetSelector:t}){return useEffect(()=>{let o=document.querySelector(t);if(o){o.style.animation="pulsate 3s infinite",o.style.transformOrigin="center",o.style.animationTimingFunction="ease-in-out";let n=`
|
|
12
14
|
@keyframes pulsate {
|
|
13
15
|
0% {
|
|
14
16
|
box-shadow: 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);
|
|
@@ -20,61 +22,25 @@ var mt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var ut=(t,o)=>{f
|
|
|
20
22
|
box-shadow: 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);
|
|
21
23
|
}
|
|
22
24
|
}
|
|
23
|
-
`,r=document.createElement("style");r.id="sb-onboarding-pulsating-effect",r.innerHTML=
|
|
24
|
-
all: unset;
|
|
25
|
-
border: 0;
|
|
26
|
-
border-radius: 0.25rem;
|
|
27
|
-
cursor: pointer;
|
|
28
|
-
display: inline-flex;
|
|
29
|
-
align-items: center;
|
|
30
|
-
justify-content: center;
|
|
31
|
-
padding: 0 0.75rem;
|
|
32
|
-
background: ${({theme:t})=>t.color.secondary};
|
|
33
|
-
color: ${({theme:t})=>t.color.lightest};
|
|
34
|
-
height: 32px;
|
|
35
|
-
font-size: 0.8125rem;
|
|
36
|
-
font-weight: 700;
|
|
37
|
-
font-family: ${({theme:t})=>t.typography.fonts.base};
|
|
38
|
-
transition: all 0.16s ease-in-out;
|
|
39
|
-
text-decoration: none;
|
|
40
|
-
|
|
41
|
-
&:hover {
|
|
42
|
-
background-color: #0b94eb;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&:focus {
|
|
46
|
-
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
|
|
47
|
-
}
|
|
48
|
-
`,g=({children:t,onClick:o,...e})=>s.createElement(St,{onClick:o,...e},t);});var kt,Tt,vt,Pt,Dt,Y,j=a(()=>{C();kt=styled.div`
|
|
49
|
-
background: #fff;
|
|
50
|
-
width: 260px;
|
|
51
|
-
padding: 15px;
|
|
52
|
-
border-radius: 5px;
|
|
53
|
-
`,Tt=styled.div`
|
|
25
|
+
`,r=document.createElement("style");r.id="sb-onboarding-pulsating-effect",r.innerHTML=n,document.head.appendChild(r);}return ()=>{document.querySelector("#sb-onboarding-pulsating-effect")?.remove();}},[t]),null}var Z=a(()=>{});function B({top:t=0,left:o=0,width:n=window.innerWidth,height:r=window.innerHeight,...i}){let[s]=useState(()=>{let l=document.createElement("div");return l.setAttribute("id","confetti-container"),l.setAttribute("style","position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"),l});return useEffect(()=>(document.body.appendChild(s),()=>{document.body.removeChild(s);}),[]),createPortal(e.createElement(No,{top:t,left:o,width:n,height:r},e.createElement(Wo,{...i})),s)}var No,E=a(()=>{No=styled.div(({width:t,height:o,left:n,top:r})=>({width:`${t}px`,height:`${o}px`,left:`${n}px`,top:`${r}px`,position:"relative",overflow:"hidden"}));});var R,tt,ot,et=a(()=>{R=styled.div`
|
|
54
26
|
display: flex;
|
|
55
27
|
flex-direction: column;
|
|
56
28
|
align-items: flex-start;
|
|
57
|
-
`,
|
|
29
|
+
`,tt=styled.strong`
|
|
58
30
|
font-size: 13px;
|
|
59
|
-
|
|
60
|
-
color: ${({theme:t})=>t.color.darkest};
|
|
61
|
-
`,Pt=styled.p`
|
|
31
|
+
`,ot=styled.p`
|
|
62
32
|
font-size: 13px;
|
|
63
33
|
text-align: start;
|
|
64
|
-
color:
|
|
34
|
+
color: #798186;
|
|
65
35
|
margin: 0;
|
|
66
|
-
margin-top:
|
|
67
|
-
|
|
68
|
-
display: flex;
|
|
69
|
-
justify-content: flex-end;
|
|
70
|
-
margin-top: 15px;
|
|
71
|
-
`,Y=({step:t,primaryProps:o,tooltipProps:e})=>s.createElement(kt,{...e},s.createElement(Tt,null,t.title&&s.createElement(vt,null,t.title),s.createElement(Pt,null,t.content)),!t.hideNextButton&&s.createElement(Dt,{id:"buttonNext"},s.createElement(g,{...o},"Next")));});function H({api:t,isFinalStep:o,onFirstTourDone:e}){let[r,l]=useState();return useEffect(()=>{t.once(STORY_ARGS_UPDATED,()=>{l(3);});},[]),s.createElement(Wt,{steps:o?[{target:"#configure-your-project--docs",title:"Continue setting up your project",content:"You nailed the basics. Now get started writing stories for your own components.",placement:"right",disableOverlay:!0,disableBeacon:!0,floaterProps:{disableAnimation:!0},hideNextButton:!0}]:[{target:"#storybook-explorer-tree > div",title:"Storybook is built from stories",content:"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories.",placement:"right",disableBeacon:!0,styles:{spotlight:{transform:"translateY(30px)"}},floaterProps:{disableAnimation:!0}},{target:"#storybook-preview-iframe",title:"Storybook previews are interactive",content:"Whenever you modify code or stories, Storybook automatically updates how it previews your components.",placement:"bottom"},{target:"#root div[role=main]",title:"Interactive story playground",content:s.createElement(s.Fragment,null,"See how a story renders with different data and state without touching code.",s.createElement("br",null),s.createElement("br",null),"Try it out by pressing this button.",s.createElement(z,{targetSelector:"#control-primary"})),placement:"right",spotlightClicks:!0,floaterProps:{target:"#control-primary"},hideNextButton:!0},{target:"#control-primary",title:"Congratulations!",content:s.createElement(s.Fragment,null,"You've learned how to control your stories interactively. Now: let's explore how to write your first story.",s.createElement(b,{numberOfPieces:100})),placement:"right",disableOverlay:!0}],continuous:!0,stepIndex:r,spotlightPadding:0,hideBackButton:!0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,hideCloseButton:!0,callback:p=>{!o&&p.status===STATUS.FINISHED&&e();},floaterProps:{styles:{floater:{padding:0,paddingLeft:8,paddingTop:8,filter:"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))"}}},tooltipComponent:Y,styles:{spotlight:{border:"solid 2px #004c7c"},overlay:{backgroundColor:"rgba(0, 0, 0, 0.48)"},options:{zIndex:1e4,primaryColor:"#029CFD"}}})}var G=a(()=>{A();D();j();});var _,Ft,K,V=a(()=>{_=styled(d.Overlay)`
|
|
36
|
+
margin-top: 4px;
|
|
37
|
+
`;});function v({prefix:t,title:o,body:n}){return e.createElement(R,null,t,e.createElement(tt,null,o),e.createElement(ot,null,n))}var rt=a(()=>{et();});var _,h,D=a(()=>{_={border:0,cursor:"pointer",fontSize:13,lineHeight:1,padding:"9px 12px",backgroundColor:"#029CFD",borderRadius:4,color:"#fff",fontWeight:700},h=forwardRef((t,o)=>{let n={..._,...t.style||{}};return e.createElement("button",{ref:o,type:"button",...t,style:n})});});function nt({api:t,isFinalStep:o,onFirstTourDone:n}){let[r,i]=useState();return useEffect(()=>{t.once(STORY_ARGS_UPDATED,()=>{i(3);});},[]),e.createElement(Yo,{steps:o?[{target:"#configure-your-project--docs",content:e.createElement(v,{title:"Continue setting up your project",body:"You nailed the basics. Now get started writing stories for your own components."}),placement:"right",disableOverlay:!0,disableBeacon:!0,styles:{buttonNext:{display:"none"}},floaterProps:{disableAnimation:!0}}]:[{target:"#storybook-explorer-tree > div",content:e.createElement(v,{title:"Storybook is built from stories",body:"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories."}),placement:"right",disableBeacon:!0,styles:{spotlight:{transform:"translateY(30px)"}},floaterProps:{disableAnimation:!0}},{target:"#storybook-preview-iframe",content:e.createElement(v,{title:"Storybook previews are interactive",body:"Whenever you modify code or stories, Storybook automatically updates how it previews your components."}),placement:"bottom"},{target:"#root div[role=main]",content:e.createElement(e.Fragment,null,e.createElement(v,{title:"Interactive story playground",body:e.createElement(e.Fragment,null,"See how a story renders with different data and state without touching code.",e.createElement("br",null),"Try it out by pressing this button.")}),e.createElement(V,{targetSelector:"#control-primary"})),placement:"right",spotlightClicks:!0,floaterProps:{target:"#control-primary"},styles:{buttonNext:{display:"none"}}},{target:"#control-primary",content:e.createElement(e.Fragment,null,e.createElement(B,{numberOfPieces:100}),e.createElement(v,{title:"Congratulations!",body:"You've learned how to control your stories interactively. Now: let's explore how to write your first story."})),placement:"right",disableOverlay:!0,locale:{last:"Next"}}],continuous:!0,stepIndex:r,spotlightPadding:0,hideBackButton:!0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,hideCloseButton:!0,callback:l=>{!o&&l.status===STATUS.FINISHED&&n();},floaterProps:{styles:{floater:{padding:0,paddingLeft:8,paddingTop:8,filter:"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))"}}},styles:{spotlight:{border:"solid 2px #004c7c"},tooltip:{maxWidth:260,borderRadius:4,padding:15},overlay:{backgroundColor:"rgba(0, 0, 0, 0.48)"},buttonNext:{..._,marginTop:5},tooltipContent:{paddingTop:4,padding:0},options:{zIndex:1e4,primaryColor:"#029CFD"}}})}var it=a(()=>{Z();E();rt();D();});var at,Jo,pt,lt=a(()=>{at=styled(g.Overlay)`
|
|
72
38
|
background-color: rgba(27, 28, 29, 0.48);
|
|
73
39
|
position: fixed;
|
|
74
40
|
inset: 0px;
|
|
75
41
|
width: 100%;
|
|
76
42
|
height: 100%;
|
|
77
|
-
`,
|
|
43
|
+
`,Jo=styled.div(({width:t,height:o})=>css`
|
|
78
44
|
background-color: white;
|
|
79
45
|
border-radius: 6px;
|
|
80
46
|
box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px;
|
|
@@ -86,20 +52,21 @@ var mt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var ut=(t,o)=>{f
|
|
|
86
52
|
height: ${o?`${o}px`:"auto"};
|
|
87
53
|
max-width: calc(100% - 40px);
|
|
88
54
|
max-height: 85vh;
|
|
89
|
-
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
`),pt=e.forwardRef(({width:t,height:o,children:n,...r},i)=>e.createElement(g.Content,{ref:i,asChild:!0,...r},e.createElement(Jo,{width:t,height:o},n)));});function L({children:t,width:o,height:n,onEscapeKeyDown:r,onInteractOutside:i=l=>l.preventDefault(),...s}){return e.createElement(g.Root,{...s},e.createElement(g.Portal,null,e.createElement(at,null),e.createElement(pt,{width:o,height:n,onInteractOutside:i,onEscapeKeyDown:r},t({Title:g.Title,Description:g.Description,Close:g.Close}))))}var G=a(()=>{lt();});function dt(){return e.createElement("svg",{width:"32px",height:"40px",viewBox:"0 0 256 319",preserveAspectRatio:"xMidYMid"},e.createElement("defs",null,e.createElement("path",{d:"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z",id:"path-1"})),e.createElement("g",null,e.createElement("mask",{id:"mask-2",fill:"white"},e.createElement("use",{xlinkHref:"#path-1"})),e.createElement("use",{fill:"#FF4785",fillRule:"nonzero",xlinkHref:"#path-1"}),e.createElement("path",{d:"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z",fill:"#FFFFFF",fillRule:"nonzero",mask:"url(#mask-2)"})))}var mt=a(()=>{});var ct,ut,ft,gt,ht,yt,xt,qo,bt,Vo,Ct,Zo,St,wt=a(()=>{ct=styled.div`
|
|
90
57
|
border-radius: 5px;
|
|
91
58
|
display: flex;
|
|
92
59
|
flex-direction: column;
|
|
93
60
|
align-items: center;
|
|
94
61
|
height: 100%;
|
|
95
62
|
justify-content: space-between;
|
|
96
|
-
`,
|
|
63
|
+
`,ut=styled.div`
|
|
97
64
|
display: flex;
|
|
98
65
|
flex: 1;
|
|
99
66
|
flex-direction: column;
|
|
100
67
|
align-items: center;
|
|
101
68
|
justify-content: center;
|
|
102
|
-
`,
|
|
69
|
+
`,ft=styled.h1`
|
|
103
70
|
margin: 0;
|
|
104
71
|
margin-top: 20px;
|
|
105
72
|
margin-bottom: 5px;
|
|
@@ -107,7 +74,7 @@ var mt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var ut=(t,o)=>{f
|
|
|
107
74
|
font-weight: ${({theme:t})=>t.typography.weight.bold};
|
|
108
75
|
font-size: ${({theme:t})=>t.typography.size.m1}px;
|
|
109
76
|
line-height: ${({theme:t})=>t.typography.size.m3}px;
|
|
110
|
-
`,
|
|
77
|
+
`,gt=styled.p`
|
|
111
78
|
margin: 0;
|
|
112
79
|
margin-bottom: 20px;
|
|
113
80
|
max-width: 320px;
|
|
@@ -116,7 +83,7 @@ var mt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var ut=(t,o)=>{f
|
|
|
116
83
|
font-weight: ${({theme:t})=>t.typography.weight.regular};
|
|
117
84
|
line-height: ${({theme:t})=>t.typography.size.m1}px;
|
|
118
85
|
color: ${({theme:t})=>t.color.darker};
|
|
119
|
-
`,
|
|
86
|
+
`,ht=styled.button`
|
|
120
87
|
all: unset;
|
|
121
88
|
cursor: pointer;
|
|
122
89
|
font-size: 13px;
|
|
@@ -126,10 +93,10 @@ var mt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var ut=(t,o)=>{f
|
|
|
126
93
|
&:focus-visible {
|
|
127
94
|
outline: auto;
|
|
128
95
|
}
|
|
129
|
-
`,
|
|
96
|
+
`,yt=styled(Icons)`
|
|
130
97
|
margin-left: 2px;
|
|
131
98
|
height: 10px;
|
|
132
|
-
`,
|
|
99
|
+
`,xt=styled.div`
|
|
133
100
|
position: absolute;
|
|
134
101
|
top: 0;
|
|
135
102
|
left: 0;
|
|
@@ -137,11 +104,11 @@ var mt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var ut=(t,o)=>{f
|
|
|
137
104
|
height: 100%;
|
|
138
105
|
z-index: -1;
|
|
139
106
|
overflow: hidden;
|
|
140
|
-
`,
|
|
107
|
+
`,qo=keyframes`
|
|
141
108
|
0% { transform: translate(0px, 0px) }
|
|
142
109
|
50% { transform: translate(-200px, 0px) }
|
|
143
110
|
100% { transform: translate(0px, 0px) }
|
|
144
|
-
`,
|
|
111
|
+
`,bt=styled.div`
|
|
145
112
|
position: absolute;
|
|
146
113
|
width: 1200px;
|
|
147
114
|
height: 1200px;
|
|
@@ -152,14 +119,14 @@ var mt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var ut=(t,o)=>{f
|
|
|
152
119
|
rgba(253, 255, 147, 1) 0%,
|
|
153
120
|
rgba(253, 255, 147, 0) 70%
|
|
154
121
|
);
|
|
155
|
-
animation: ${
|
|
122
|
+
animation: ${qo} 4s linear infinite;
|
|
156
123
|
animation-timing-function: ease-in-out;
|
|
157
124
|
z-index: 3;
|
|
158
|
-
`,
|
|
125
|
+
`,Vo=keyframes`
|
|
159
126
|
0% { transform: translate(0px, 0px) }
|
|
160
127
|
50% { transform: translate(400px, 0px) }
|
|
161
128
|
100% { transform: translate(0px, 0px) }
|
|
162
|
-
`,
|
|
129
|
+
`,Ct=styled.div`
|
|
163
130
|
position: absolute;
|
|
164
131
|
width: 1200px;
|
|
165
132
|
height: 1200px;
|
|
@@ -170,14 +137,14 @@ var mt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var ut=(t,o)=>{f
|
|
|
170
137
|
rgba(255, 119, 119, 1) 0%,
|
|
171
138
|
rgba(255, 119, 119, 0) 70%
|
|
172
139
|
);
|
|
173
|
-
animation: ${
|
|
140
|
+
animation: ${Vo} 6s linear infinite;
|
|
174
141
|
animation-timing-function: ease-in-out;
|
|
175
142
|
z-index: 2;
|
|
176
|
-
`,
|
|
143
|
+
`,Zo=keyframes`
|
|
177
144
|
0% { transform: translate(600px, -40px) }
|
|
178
145
|
50% { transform: translate(600px, -200px) }
|
|
179
146
|
100% { transform: translate(600px, -40px) }
|
|
180
|
-
`,
|
|
147
|
+
`,St=styled.div`
|
|
181
148
|
position: absolute;
|
|
182
149
|
width: 1200px;
|
|
183
150
|
height: 1200px;
|
|
@@ -188,9 +155,165 @@ var mt=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var ut=(t,o)=>{f
|
|
|
188
155
|
rgba(119, 255, 247, 0.8) 0%,
|
|
189
156
|
rgba(119, 255, 247, 0) 70%
|
|
190
157
|
);
|
|
191
|
-
animation: ${
|
|
158
|
+
animation: ${Zo} 4s linear infinite;
|
|
192
159
|
animation-timing-function: ease-in-out;
|
|
193
160
|
z-index: 4;
|
|
194
|
-
|
|
161
|
+
`,styled.h2`
|
|
162
|
+
color: #000;
|
|
163
|
+
font-weight: 700;
|
|
164
|
+
font-size: 20px;
|
|
165
|
+
line-height: 20px;
|
|
166
|
+
`,styled.p`
|
|
167
|
+
font-size: 14px;
|
|
168
|
+
font-weight: 400;
|
|
169
|
+
line-height: 20px;
|
|
170
|
+
color: #454e54;
|
|
171
|
+
`;});var vt,Pt=a(()=>{D();G();mt();wt();vt=({onSkip:t,onProceed:o})=>e.createElement(L,{width:540,height:430,defaultOpen:!0},({Close:n})=>e.createElement(ct,{"data-chromatic":"ignore"},e.createElement(ut,null,e.createElement(dt,null),e.createElement(ft,null,"Welcome to Storybook"),e.createElement(gt,null,"Storybook helps you develop UI components. Learn the basics in a few simple steps."),e.createElement(h,{style:{marginTop:4},onClick:o},"Start your 3 minute tour")),e.createElement(n,{asChild:!0},e.createElement(ht,{onClick:t},"Skip tour",e.createElement(yt,{icon:"arrowright"}))),e.createElement(xt,null,e.createElement(bt,null),e.createElement(Ct,null),e.createElement(St,null))));});var kt,Bt,Dt,Tt,It,z,Lt=a(()=>{kt=styled.div`
|
|
172
|
+
display: flex;
|
|
173
|
+
flex-direction: row;
|
|
174
|
+
max-height: 85vh;
|
|
175
|
+
`,Bt=styled.div`
|
|
176
|
+
flex: 1;
|
|
177
|
+
display: flex;
|
|
178
|
+
flex-direction: column;
|
|
179
|
+
font-family: ${({theme:t})=>t.typography.fonts.base};
|
|
180
|
+
`,Dt=styled.div`
|
|
181
|
+
display: flex;
|
|
182
|
+
justify-content: space-between;
|
|
183
|
+
align-items: center;
|
|
184
|
+
color: ${({theme:t})=>t.color.darkest};
|
|
185
|
+
padding: 1em;
|
|
186
|
+
border-bottom: 1px solid ${({theme:t})=>t.appBorderColor};
|
|
187
|
+
|
|
188
|
+
h2 {
|
|
189
|
+
margin: 0;
|
|
190
|
+
padding: 0;
|
|
191
|
+
display: flex;
|
|
192
|
+
align-items: center;
|
|
193
|
+
font-size: 13px;
|
|
194
|
+
font-weight: bold;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
svg {
|
|
198
|
+
margin-right: 0.5em;
|
|
199
|
+
}
|
|
200
|
+
`,Tt=styled.div`
|
|
201
|
+
font-size: 13px;
|
|
202
|
+
padding: 1em;
|
|
203
|
+
flex: 1;
|
|
204
|
+
display: flex;
|
|
205
|
+
flex-direction: column;
|
|
206
|
+
align-items: flex-end;
|
|
207
|
+
justify-content: space-between;
|
|
208
|
+
color: #454e54;
|
|
209
|
+
|
|
210
|
+
h3 {
|
|
211
|
+
font-size: 13px;
|
|
212
|
+
font-weight: bold;
|
|
213
|
+
padding: 0;
|
|
214
|
+
margin: 0;
|
|
215
|
+
}
|
|
216
|
+
`,styled.div`
|
|
217
|
+
display: flex;
|
|
218
|
+
flex-direction: column;
|
|
219
|
+
`,It=styled.span`
|
|
220
|
+
color: ${({theme:t})=>t.color.secondary};
|
|
221
|
+
display: inline-block;
|
|
222
|
+
border-radius: 4px;
|
|
223
|
+
padding: 0.2em 0.4em;
|
|
224
|
+
opacity: 0.8;
|
|
225
|
+
background-color: ${({theme:t})=>t.color.secondary}20;
|
|
226
|
+
font-weight: bold;
|
|
227
|
+
`,z=styled.img`
|
|
228
|
+
max-width: 100%;
|
|
229
|
+
margin-top: 1em;
|
|
230
|
+
`;});var Ot,Wt,Mt,At=a(()=>{Ot=styled(motion.div)`
|
|
231
|
+
position: relative;
|
|
232
|
+
z-index: 2;
|
|
233
|
+
`,Wt=styled.div`
|
|
234
|
+
position: relative;
|
|
235
|
+
box-sizing: border-box;
|
|
236
|
+
background: #171c23;
|
|
237
|
+
width: ${({width:t})=>t};
|
|
238
|
+
height: 100%;
|
|
239
|
+
overflow: hidden;
|
|
240
|
+
padding-left: 15px;
|
|
241
|
+
padding-right: 15px;
|
|
242
|
+
padding-top: 6px;
|
|
243
|
+
|
|
244
|
+
&& {
|
|
245
|
+
pre {
|
|
246
|
+
background: transparent !important;
|
|
247
|
+
margin: 0 !important;
|
|
248
|
+
padding: 0 !important;
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
`,Mt=styled(motion.div)`
|
|
252
|
+
background: #143046;
|
|
253
|
+
position: absolute;
|
|
254
|
+
z-index: 1;
|
|
255
|
+
left: 0;
|
|
256
|
+
width: 100%;
|
|
257
|
+
height: 200px;
|
|
258
|
+
`;});var Et,jt=a(()=>{Et=styled(motion.div)`
|
|
259
|
+
position: relative;
|
|
260
|
+
padding-top: 12px;
|
|
261
|
+
padding-bottom: 12px;
|
|
262
|
+
`;});var se,Nt,_t=a(()=>{jt();se={default:{filter:"grayscale(1)",opacity:.5},active:{filter:"grayscale(0)",opacity:1}},Nt=forwardRef(({active:t,contents:o,open:n},r)=>e.createElement(ThemeProvider,{theme:ensure(themes.dark)},e.createElement(Et,{ref:r,initial:"default",animate:t?"active":"default","aria-hidden":!t,variants:se,transition:{ease:"easeInOut",duration:.6}},o.map(({toggle:i,content:s},l)=>e.createElement(Fragment,{key:l},i===void 0&&e.createElement(SyntaxHighlighter,{language:"javascript",customStyle:{fontSize:"0.8rem"}},s),i&&!n&&e.createElement(SyntaxHighlighter,{language:"javascript",customStyle:{fontSize:"0.8rem"}}," // ..."),i&&n&&e.createElement(motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{delay:.4}},e.createElement(SyntaxHighlighter,{language:"javascript",customStyle:{fontSize:"0.8rem"},codeTagProps:{style:{paddingLeft:"15px"}}},s)))))));});var Q,Ht,Gt=a(()=>{At();_t();Q=49,Ht=({activeStep:t,contents:o,width:n})=>{let[r,i]=e.useState([]),s=useMemo(()=>o.map(()=>e.createRef()),[o]),l=p=>{let d=0;for(let m=0;m<p;m++)d-=s[m].current.getBoundingClientRect().height;return d},w=useCallback(()=>{let p=o.flatMap((d,m)=>{let y=s[m].current.getBoundingClientRect().height,P=[{yPos:l(m)+Q-7,height:y,index:m,open:!1}];return d.length>1&&P.push({yPos:l(m)+Q-7,height:y,index:m,open:!0}),P});i(p);},[o]);return useEffect(()=>{let p=new ResizeObserver(()=>{w();});return s.forEach(d=>{p.observe(d.current);}),()=>{p.disconnect();}},[]),e.createElement(e.Fragment,null,e.createElement(Wt,{width:n},e.createElement(Ot,{animate:{y:r[t]?.yPos??0},transition:{ease:"easeInOut",duration:.6}},o.map((p,d)=>e.createElement(Nt,{key:d,ref:s[d],active:r[t]?.index===d,open:r[t]?.index>d?!0:r[t]?.open??!1,contents:p}))),e.createElement(Mt,{animate:{height:r[t]?.height??0},transition:{ease:"easeInOut",duration:.6},style:{top:Q},className:"syntax-highlighter-backdrop"})))};});var $t,Yt=a(()=>{$t=styled.ul(()=>({display:"flex",flexDirection:"column",rowGap:16,padding:0,margin:0}));});var Ft,Qt=a(()=>{Yt();Ft=({children:t})=>e.createElement($t,null,t);});var Xt,Jt,Ut,qt=a(()=>{Xt=styled.li(()=>({display:"flex",alignItems:"flex-start",columnGap:12})),Jt=styled.div(({theme:t})=>({fontFamily:t.typography.fonts.base,color:t.color.darker,fontSize:"13px"})),Ut=styled.div(({isCompleted:t,theme:o})=>({display:"flex",alignItems:"center",justifyContent:"center",border:!t&&`1px solid ${o.color.medium}`,minWidth:20,width:20,height:20,borderRadius:"50%",backgroundColor:t?o.color.green:"white",fontFamily:o.typography.fonts.base,fontSize:10,fontWeight:600,color:o.color.dark}));});var W,Vt=a(()=>{qt();W=({children:t,index:o,isCompleted:n})=>e.createElement(Xt,null,e.createElement(Ut,{"aria-label":n?"complete":"not complete",isCompleted:n},n?e.createElement(Icons,{width:10,height:10,icon:"check",color:"white"}):o),e.createElement(Jt,null,t));});function Zt(){let[t,o]=useState(null);return useEffect(()=>{(async()=>{try{let s=(await(await fetch("/index.json")).json()).entries["example-button--primary"].importPath;o({data:s,error:null});}catch(r){console.log({e:r}),o({data:null,error:r});}})();},[]),t}var Kt=a(()=>{});var to,oo=a(()=>{to=(t,o,n)=>{let[r,i]=useState(null);return useEffect(()=>{if(t){let s=()=>{n.getChannel().once(STORY_RENDERED,()=>{o.getData("example-button--warning")&&i({data:!0,error:null});});};return n.getServerChannel().on(STORY_INDEX_INVALIDATED,s),()=>{n.getServerChannel().off(STORY_INDEX_INVALIDATED,s);}}},[t]),r};});var eo,ro=a(()=>{eo=(t,o)=>{let[n,r]=useState(null),i=document.querySelector(`.${t}`);return useEffect(()=>{if(o){let s=new ResizeObserver(()=>{i&&r({top:i.offsetTop,left:i.offsetLeft,height:i.offsetHeight,width:i.offsetWidth});});return s.observe(i),()=>{s.disconnect();}}},[t,o]),n};});var io,no=a(()=>{io="data:image/png;base64,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";});var ao,so=a(()=>{ao="data:image/png;base64,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";});var lo,po=a(()=>{lo="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfoAAADkCAMAAABHYBYkAAACDVBMVEUAAAA+Pj4AAAAgICAAAAAAAADt9PkAAADv9/cAAADb4+Xe5urU19jf3+bs9Prs9Pna3N7Z3d6+wMSAgIDX2tze5erV2Nre5urY2t0AAADNz9HU1tgAAAAAAACrq63Q09XV2dva3d7f5urV2NrW2Nvc5OrS1dbP09TT19je5uvc5+rf5OrP09bNz9L3+vz////Z3N7s9Pne5uru8vRanTv/AADmlk3Y293X2txFTlRuqVOoy5vQ48zR09XW2dsuNDiDiIuVwIPz4dC817Pj7+TU19mipqn17eaBtGvo6erV2Nrqr3lko0fIy82vsrTt9fDvyKTeDBHoo2Pz9PXP0tQAAADT1tiy0aeJlZ7uBwnsu465vb/x1brLzM3N0NKXnJ9cZGl0en+Nk5Wexo9RWV+LuneLkJR3r1/3+fvq7fDLztDl5ufwz6/d3t/FyMr29PH059vDx8nF3b+817SpzJyyt7va293a6djy28X29/jm7O/ByM2IjZD28/Hc4eTnnFjy8vLt7/DG3cB/g4hob3RjZ2r7/Pzw9vmYoqlzgozpqW6mr7btwprrtYTnnVji6OzZ6Ni9wsWVmZvtwZriKy/mCg32AwXo6uvN1Nmpra+iqKuEkpt8ipPq7Ozi5OXf4eL98PD74eHzpKbmSk07QUXkOj7sCAr19fa+v8HuhohvdHbrtYM7QUTZ6dfvhojfjR52AAAALnRSTlMABN8GzxDvgCB/IN9hEL+vgO8kBODPkYDAt4OBUCAV8O/Pv7ChYFLg0c9gYNHBNkmFSwAAFx9JREFUeNrsnetX02YYwNuxOYfgBRhjujl3dG47Z0tTltNK75SmLdBCT6mtB0rYCggWhiJj3srG9Kg7XubUD84P6hfPmWfbH7nnfd+EtLY1KU27tHt+NMl7Sfvll+e9JCGxIAiCIAiCIAiCIAiCIAiCIAiCIAiCIHVjpQvSzhQ7trIP3ViL9sDDoL2QPSuy6doKi6yfVsj16L6tsALMeoeSBKhxWLFS5XgA0Hy7wPyyP5DcwfRDQtlYYEX1d8hlGPdtAjVJlcOH/cmpDiVFCxWKGglN9u7fY29NDuy1mIrurv7jfYf4OnCSBThF8VHGFETyJ5KFZACWgVI5SSv6Bvq7euQuQMt8q4oH9pjIfffBAb5uwDtPzVP5VDyoB6NpMS2SD9tSRJJgH4CliH3i/wtmX4MD9ttci3Lbvt9iEroPHuKNwEkg4uWA94mi7/mzqVs23dy6sr3iBP0nejQ7fbuda1nseyzmAMQbaJ5CzYviC9BeO1dW+LGxIx10rNCm6u0WM9D5qXHieRLzAGvrX0zZdsnyE5/Y14PqG0sXCXnj5BPvsECPzVPxu5a/MnbspNWK6hvHQd5Y80455sUXt2z18UT0HUH1KqY17wSYedbNj9rq5srYGHFvRfWN4CRvsHqAhPzYE1BnhPsuK0Z9Q+g8ZGBzzzP1xsQ8Yyp9DMZ6VlRvPH1GdvQ8i3lwL56yGcS59BdWbPAZ5uzoScjzinsY3C/bjOJ78QiqN55OHjBQvhLz0NwbxrJ47CiqN5wTBopnPT07b++0GcgTCHsrqjdv0IN3/hQBzKd/MVL9LQh7cF+f+ozrImcqGqf+43ffsWjSxVcivi7Dq0jrcV2jezBfeYznm93BV6v7lfSRutW7hRGuATwej5hO/Uen39Z2X/nUfS7AyPEqE4E5DfXwAZj65+X6bvp3uFn7BG+g7gbf477ENYBxh/nUW97Vdt/JV1GfCxOe1qQeULr69FS5vsLNmzcX/P4F2BRstTImHrWas683pXod7ruqqQ+zRM3q5a7eW8XgrN8/a9sNK+kuHerdmUn3YnRkkuWuu0MkOx+iIQ+wqM9sXF8cDl1ajF6nbUFmOMp2YT/AeYajiyOwl5v9Ssi9QbfXrl2bKreXTSSSjnuJRCIoZ89vJcbHs3AwrCbOQwFsaMXW6v3x+1kN9c1136+tPj4zs66oZ/mHcaVmXXzN/SkCDPK+f7P67ZUV2/aEzwYbonVlm24mXkG2Cr+k+3WoF1xLgismuJi1YWHDJQBu2tEDrK93uWIxYckFVZNgVhBi8A0ho/zAiEAIcfPy3sMCU3/mzJlzlUJeJiFng0mSA8lJ2hjAhqwjScdvUHFfQ31T3Q9oqd8s0D5fUtSn5mg+DuJzJLFZLH7HfXrlzeon/EOP/P7CCsv5/RNwNNChQNWe4E/vcT3qBVeI2HLL1lxLHgj+jdJhngvERoV5LkPyoR88JLRjMXa0wHEwPwmFIc4jREnBZMzFqeo1GnxIJ/++wG1lg6XqYZ3Y4iLTjoSG+ma673tzX/+QnyiENzdzYF1WHw48mnkYhkMhlQs8fTiTC6yXTuvlqB/VUv+Pf+iviWL1C/6FV7ML/kfVpnfePrhur63eQ3UxkcNK+L+m3gVVsOMlOEIUlBgXhB+UoiWBfHlEGK5NPUuUqs86pkn6/M8/n9dQ30T3fDX1jAk+JUJ2PRCg6mnNQ1iL5BgI05pfy+7S8EHUn9NSTx0XqX/lH9qG0H/5j60K0jEwr61etvY7U5/hKqmPQhrUh2SrIY/HMy/vCk29ursb1lH4KcpPP/3E6VCfLVNPi1eDhHHHhUap//CtCpw+/fYu1M/NEOJgeX1mZjMQSMnq5wK5iXUJEo8C4RlSkytv8GGUp61+u1R9wb8wAQz5q3UVKVGPepfc0o+wjUdbfSYmUNxyg89RWNtBhgJLtYzwwW2ZerpSyLaA+uK+vpBj6tW+/lex0tSfqndC1Is61NtK1d/wy8xWU59uiPqM4MpA1LMQZz+gsCh4oHqjNvWRyuqzQcZWMxv8997Y4B/SUJ8KBDZFPs7UP6JF4vomdPOwyyZfgnLZjqp/Uqv6gtZpHkns0K0epOlV72ItfCX1HmGeVNen3kHU31EbAw31zTIP9GmoB+kidPNMfUGEAjbPC8OSgywbC6hBz9SPeZ9rqyfQLj8M6kmFj8z6fNVG+KnPdY3wJ9kY/nd96tWDRVWvEotdhF1k7t69W3mYd79cvZqMUPX3HKtNVa9tHjiuoV4swPztaYGoX4fGfY7P5Z6S/Awv0lnAHIwEd5DN+8i8Xp96mND9ddP/kozwb0Dyxo2X1WL/l9SArmHePKwvgkC96tlk4JJQSb1biJFf0BjhTyteVfVqcYKqDzqSrDzSPPXv1XlKh83eCw9BPY39AD+Rg3Vhk8R7OADMrZedziPqvfrUrwz5/S/DQ0S97RGk/UPhamfzvP26ol4YvuiOCRuvqw/BubyosAjryRL1kHCNwDeWKqmfFCCrpR68/jzNzuYx9WrxanY6yeb1CUdy9XL28W/jTVP/no4TuZrE46KcEunQXlpXCkRIld+pQdynpWWbPny+bTU9W/1sntPbpWde7/oB7Mcy3OvqPYJCqFT95DD9wki5eiAKpRrqgeydorN5alzfg9LkBVBPWE1CDvxrqG+aeaCbNwg16J3kwl1q1GYoy/l0jwXQVE9m6ZNcDVT/AhsD7p5IsHhwdyEYjJjrou0Ab6x8ZYjvNFb9M+mLXqsu9cZBz+WW0la3ahzkG3IndlraNlS9NwUX7pqqftJz0fXapL511Oui+5DRUc86+5TP0KDPe3uarN4jyOfzVdpMvbFhr1629eaNDPtU6kSvHvUb142L+o2NS1wp7aYewt5Idu7QSqVuGWb+ORnkWU16l07rqpfD3sjnaVD1XumFUeav5FOHrXgzdgP41ED3ymMViPv8M4PMp6TPrb34P3elmPDfLfmda/ZS/k9D7sH35j/psVpRfSPoMrzFp+69Un7KEPPek729+E/WO5i9u6e35ebjK3W39hJ09L0WK6qXMat70K5O8aj7Op+ocm42Lx3GB6o0kpOHDH+uBiCmpbj0pI6QT8elT7qsbfvcPFOot3T2GXg2l5fV+8R0Kh/P71L+9o/xvPRVT8cb1e9pXfXLJlFvYKNf/ITcMdEL8iX+WY3t/q3t5+k1CPnDHRqPSN9vv73MtSTLt+0HLCah84SxF2/ZHM+XhpF+PL4WTzt/dMKHLLzzR4oTkMvomu4BdWP5tbV4HsQfBe/4eORm0Nn1qVHq1cCnzX4qD/rLmK1SNJvPS6mvDx/t6LVosveAvTXZs99E5pn9/oE+I1p8UC+f1yPNftrrTaXIIsGSksgH8rD20lKSgJUEZZIkffL58f6uo/gyjDbA2tsLGjvIKw90Q7xb8VUYLQ8LYLBP3n/CgBwA2V4LyzPb+O6b9oXYpYLlnKJafeGNFV96134w6SUFKhjpCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCFIfe/e38HM1djiw19J8uj94f9D0vP9ZOz5Q5T9+uErnvsGr35ieq4P7Oi0VOWC/zbUBt+37Lc1m34NlWwuw/GBfd9s9N68Y+x5Lk/lssCXMg/vBD9pbvd3SZL68amsRrr6P6g1l8Btbi/DNIKpH9age1aN6VN/6oHpUXw1Uj+pRPapH9VxbgOpRfTVQ/ZvVuwVghCsnKoSqvqMe4LSJOByRnUxwdfpxlmanHUCQU2uS97hyxskuKkH4rYaqh5eY/9/Ue9zuaI3qM253rEb1W/cclAuQvpxI3ClR75g2gfqPTr/9zq7UT82Ew2ujJDXzPaxGvSStsLZmK2YmpaGs2Q2+u0b1gKtG9dOOZDByIZsMytlir5HEZROot7wL7mtXP3V2iHIWhA+FoSAMa5XvvrUVM3S2iqr2VZ91JFlqq0w9xQzqqfta1U99OzQH0kfDC3Oy+rWzay2p3pMZjkbnQ4r6kcXosOJ/BGpGKql/cO1aXkM9eMyqxSXqIwlAjfrL0+PjjyOq+q1EItIk9cx9jernlBgfZVFPaUX1IUGIuWKCkGHqhwXIxC7RmiVa45osV//HmTP/tndvP21bcRzA0bR1qyrgaUKT9lRpL5vkCHRmKY7zkMTKZVgJxKtCQ0QcxSFUAoKACRAqiItECy3t1HYPpQ9dq1aqpu1v3O+cn42hTpWbExL4fR/w8eVkDx+fixPv9FED+hoveOmRFJJ3KmRlOZsVFyP9w2N5qmetHu1bo7dcWpvewKHeWAob5/SplEsPJ7CMl9g1lpZ4aSmcujL6ssr/6iwj6NkaTOmQu8rKsFlnkVboa4VCzXbblbz03mleVn4CI0Ii79DDrbB44bO6TY/2rdCHg+lL9OIQp01bMP4fpJB+FsQden7CFM5py7Ls2UHKDB5CTTNoQZ2e03v3k+gspv/7LCnhTqYxvTebcrYZ+oJ7maAH+UJPn+vRvgX6dHC5Ln2czwDCJaRHebzCKoUDYcsU4GmYGFhpXjLjSwZULBqB1GHpyug1VVXLLCSYVyVIjpUlqczKKk+ExTz0D3Z2njWgLzRH/xSlHfoCyneN/oev6uTeva+bpwe1cF160wEEergN3CtMA5t5IIVH4xbeBBBAx+pXQ5/TmQjSqxJkn1V42UnIQ4/xodXj8O7SQxb7nH62fqvHcQDpLz3sBQ+wVjiwHMTRHe6CuCgadh0rfSX0Maas76tqCOnx4U5lSV7OqRitHfoVebc5+sRF+tPN3d2VHnf4t6HD73isB9ewQx8MljwzfKAHb4wopkQ9O/Eroa+idu5yq4chv4KdP6Z1+touojbs8DcvP9cvytlaL+lRvgV6wyrVp5+t3+pd+lnujUH61HmdK6FnithUkB6f8cp8g/3AJfqMU9w5Ofmj8fczU5/Rb9ahn8KrXHq47kUP6VG+FXpnnAY5A2CLNr2BxM5YP++lx/7CpYdYBz2nxz5dRBetfoPZ9FX4m1H4sYyuY0//r4SpMLXZGT7qYtedsBv/IpB66RPybkJsaw59DWZ6vaJH+da/zYunYBO34oBXcuZpRQGbNoAeNgDuoYczoq0XBb17Fxlxo2f0yJuMRFTeuJXYakiv2vR6cjVWZWUcA5TyaiyUVM7vFr0SiTRHjw1azhcWOaczAjzN57kzfJeXl4/h74q4KpvfLLw4TSA93jOJHtGjfGv0YAff4VsmjOgpbmweGoLeKAUPS5YVdp7rDwwPPTzLl0qHwZJDz+8Xs3Romale0kta0v7hNsIg6zFnrFdgL4I9+xovM52fwP0q7DZPL8GTGmTScUxM2j/cyk4KF66yWz3eM8e9oUf51ugRP10sppdwwl8sBoxZYbccL6bBO7wsLpkFax7cpvCScHw+zfeXZg37k+Lz8fCVvaqhqSpSY3BGj9nAnbazEo0+7Oyq/vzRti9Db+nQqxpEPzREL2gRPdEPfoie6L8Uoid6oid6opeuRYie6L8Uoid6oid6opeuRWjxtJYXT7t1PegXek8/NjhLJv4yVC8j40cL0sBn4Wh8dKjHGb7zTAoMQGChVFoe+WJoeWSwHx0f/NwaAfne5+dBWBR9bHiIQqFQKBQKhUKhUCgUCoVCoVAoFAqFQqFQKBQKhUKhUCgUCoVCoVAoFAqFQqFQKBQKhUKhUCiUG5zvRq7JuhpNZNTfBRiGx+5O9H2+/2lo6HovqNLssiu0oMp5RsePpBuTo/ERH+nvDMYSWlsTd4av9bp5zWX8ln/yP01sBQYiCxNjRA8LK97IJRPvEj3Q00KpRE/0RE/0NyJET/RET/REf0NC9ETvO/3bT++nL+XDu0C/hOi7Sf/3y+lXH+9fzKvpl38H+iNE3036l9N//fpZ/pp++TbQF2mKnilSE4mwmM8kMRaRGiQrT0lNpeBcGJVlL313/hHzd1zea/8p0Bch+hbof7z39Tet0H949WudvHrvXmGERZbq46TChj/Ke6+Jvm16zLdg3wL99P169B+n3SvCQYxZFz8eTPlDP/eG6DujR/tO6e9fol9OQZZNK9VN+tcdtPpMqJKMZcSOmoskk2XNOafyPfUCfS6kCbZKMqLtY1kK5fh1FXGef1RkVRzeCImKamiDVwhl+DVYQVy+6tAb29vbRkP6wlQt8WJyslATwPnJycUEFLCcX/GFHu19pQ9j1x4sdoV+b05s3sBmbqs9+ipTdKZwe40xHcosJwnHJGOKwpjm0GcibF2ClBnUUJJMtT8gxng0qK9DfcbK2KpD4sYQ90ySlfl/hKl4hperNv2DmZmZBw3pJ+XoqQwpQDkvy9lTOSvsp0Q57ws92vtNDzEPcOxHayz5QD9zxv/uPN4LBM4etUXPFA1oBYQGTVwAZrClVzL8mEOfqaJ8zK5h04N2OSNp63BM4RdoCot56asqv2UqeH9BeZ01pt8srLj0p/8kpIeFqCQ9kScfStKifAyHE/JplPs79LVCoQN6tPef3uL04VIwiM0/BSUr3jH9H2d7fLM9wzuAN3+0Rb/GW7iuY5fvcqnYE0CQHuWFI9Zw6OEwZp8lJVEx6aHHKkzngwaaJxvTY5AepCFCOwvyvO1H+Z9FXj5GekwH9GjvN308OMt3iqlA2CyCvGmGU+FDs0P6Px8/E9tHJ9j2t9uhR08bUlNVtSzUQmjn0OdQ3luDd/UYrAfCLOOhf853FObWyzlj/c7OjtQE/eb5lO5plGdKfsLNRb/wpC36H76qk3v3vvaPvjQPKQXjvNM/xENGoCjMDasz+t9s663Hv4nt9uOddmf4OI/L6YxHqFXY6kV6SBlvDqeGQ69ffAxAYc1Dr53TV9lzzwy/Mb0wRmYneT4bEPO+xT6lPyyVSkFrGcpL0PJ5YFM6FKViJ/TYzPEW2LLpf+uIHkbx9X1VDdWlzylo7aFXWqDHs+3QJ+xSXs5HMXBkV8aewLcO/7bvHX7KKokyBujNUuczfLeZn+AE79njP1vv8LHRInQVVXJCDSHdDp8P/vx0xqnxRXr9Qodf9qfVu/RTF5mzeHjKL/rbXZjmpYPLotWnRAzR9UM6n+a92ePTfNH4987am+aBCoI4ihWhlhPzcVeVMyYRUBUbD30OhwSN6e40L+mht2+QiDPWn5ycPGiBPipPuoefypu48Yf+dlce7kwThnY+4GMOLENsgL6zPDoDc2z7ZzOBduiF16oA1IXQBgM1dwqvZc69qiwn+vCKcPbQg7kmzkdwni8OeejtE0qLM/yE29KjeA/U+CA/KSb9vtCjvL/0uE3D0G4tQdHAuT6UZoMd02/NnX+LO7fXFr3OIqs5na0JNCW2GtKrQC9w4UwsJDiRXtPZBtwTCquGyqzqoYduQcmtRvAGyMDnxnKK4qGHHfguT9HbpY/CBG9zc1EcqWWhvJjd9YMe5X2nh5SgnRuHfL5vmQbv6s35kjkP9D5+i9sWvbLGGNNz7kR+PYb00prCIEm31Us58ayvRXiFiJce7CHV56K8ofCrQl56rcI/db1demnlWIac5mu8wWehOLnoAz3Kt0D/sRF9Km7jLsV5i18uzs/PGgEsxY3f44YP9G/m2qXHZFSV8woWtyj4cNcbzZnmeT9K83ysJxvqhtRJEmJ6j1mJrnjO9+JH2/f1f7T9EOhpXu/1/C0dbMKDkG69qvGp/qsaffJ6XrfoIzFN0sqsLA1CuvWC1tv6L2gF+iPdolcYT0UaiHT1tcz7F/PxBryWmdnPhXKqNBjpCj3m3YfpS3n/X5+8lElv5NL/gkH0RE/0RC/doBA90RM90RP9DQnRE70PuTs4i6d9P1Qvt24S/YKf9GODsVgmXy7zl6F6GRk/WpBuSBaOxkf9ox++82wglstcmLhDyyPT8sif2Y+O35TcGgF5P/Pz9xN9n7tjw0N18z9MDqHqCMleJwAAAABJRU5ErkJggg==";});var mo,co=a(()=>{mo=[[{content:"// Button.stories.jsx"}],[{content:"import { Button } from './Button';"}],[{content:`const meta = {
|
|
263
|
+
title: 'Example/Button',
|
|
264
|
+
component: Button,
|
|
265
|
+
// ...
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
export default meta;`}],[{content:"export const Primary = {"},{content:`args: {
|
|
269
|
+
primary: true,
|
|
270
|
+
label: 'Click',
|
|
271
|
+
background: 'red'
|
|
272
|
+
}`,toggle:!0},{content:"};"}],[{content:`// Copy the code below
|
|
273
|
+
export const Warning = {
|
|
274
|
+
args: {
|
|
275
|
+
primary: true,
|
|
276
|
+
backgroundColor: 'red',
|
|
277
|
+
label: 'Delete now'
|
|
278
|
+
}
|
|
279
|
+
};`}]];});var uo,fo=a(()=>{uo=[[{content:"// Button.stories.tsx"}],[{content:`import type { Meta, StoryObj } from '@storybook/react';
|
|
280
|
+
|
|
281
|
+
import { Button } from './Button';`}],[{content:`const meta: Meta<typeof Button> = {
|
|
282
|
+
title: 'Example/Button',
|
|
283
|
+
component: Button,
|
|
284
|
+
// ...
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
export default meta;`}],[{content:"export const Primary: Story = {"},{content:`args: {
|
|
288
|
+
primary: true,
|
|
289
|
+
label: 'Click',
|
|
290
|
+
background: 'red'
|
|
291
|
+
}`,toggle:!0},{content:"};"}],[{content:`// Copy the code below
|
|
292
|
+
export const Warning: Story = {
|
|
293
|
+
args: {
|
|
294
|
+
primary: true,
|
|
295
|
+
backgroundColor: 'red',
|
|
296
|
+
label: 'Delete now'
|
|
297
|
+
}
|
|
298
|
+
};`}]];});var go,ho=a(()=>{go=[[{content:"// Button.stories.tsx"}],[{content:`import type { Meta, StoryObj } from '@storybook/nextjs';
|
|
299
|
+
|
|
300
|
+
import { Button } from './Button';`}],[{content:`const meta: Meta<typeof Button> = {
|
|
301
|
+
title: 'Example/Button',
|
|
302
|
+
component: Button,
|
|
303
|
+
// ...
|
|
304
|
+
};
|
|
305
|
+
|
|
306
|
+
export default meta;`}],[{content:"export const Primary: Story = {"},{content:`args: {
|
|
307
|
+
primary: true,
|
|
308
|
+
label: 'Click',
|
|
309
|
+
background: 'red'
|
|
310
|
+
}`,toggle:!0},{content:"};"}],[{content:`// Copy the code below
|
|
311
|
+
export const Warning: Story = {
|
|
312
|
+
args: {
|
|
313
|
+
primary: true,
|
|
314
|
+
backgroundColor: 'red',
|
|
315
|
+
label: 'Delete now'
|
|
316
|
+
}
|
|
317
|
+
};`}]];});function yo(){let[t,o]=useState(null);return useEffect(()=>{(async()=>{try{let i=await(await fetch("/project.json")).json();o({data:i,error:null});}catch(r){o({data:null,error:r});}})();},[]),t}var xo=a(()=>{});function Co({onFinish:t,api:o,addonsStore:n}){let[r,i]=e.useState("imports"),[s,l]=e.useState(!1),[w,p]=ke(),d=Zt(),m=to(r==="customStory",o,n),y=eo("syntax-highlighter-backdrop",r==="customStory"),P=yo(),M=P?.data?.language==="javascript"?mo:P?.data?.framework.name==="@storybook/nextjs"?go:uo,Bo=()=>{let A=M[4][0].content;navigator.clipboard.writeText(A.replace("// Copy the code below","")),l(!0);},Do={imports:1,meta:2,story:3,args:4,customStory:5};return e.createElement(L,{width:738,height:445,defaultOpen:!0},({Title:A,Description:To,Close:Io})=>e.createElement(kt,null,e.createElement("div",{style:{height:"445px",backgroundColor:"#171c23"}},M?e.createElement(Ht,{activeStep:Do[r]||1,contents:M,width:"445px"}):null,y&&!m?.data&&e.createElement(h,{ref:w,onClick:()=>{Bo();},style:{position:"absolute",top:y.top+y.height-45,left:y.left+y.width-(p.width??0)-10,zIndex:1e3}},s?"Copied to clipboard":"Copy code")),e.createElement(Bt,null,e.createElement(Dt,null,e.createElement(A,null,e.createElement(Icons,{icon:"bookmarkhollow"})," ",e.createElement("span",null,"How to write a story")),e.createElement(Io,{asChild:!0},e.createElement(Icons,{style:{cursor:"pointer"},icon:"closeAlt"}))),e.createElement(To,{asChild:!0},e.createElement(Tt,null,r==="imports"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Imports"),e.createElement("p",null,"First, import Meta and StoryObj for type safety and autocompletion in TypeScript stories."),e.createElement("p",null,"Next, import a component. In this case, the Button component.")),e.createElement(h,{style:{marginTop:4},onClick:()=>{i("meta");}},"Next")),r==="meta"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Meta"),e.createElement("p",null,"The default export, Meta, contains metadata about this component's stories. The title field controls where stories appear in the sidebar."),e.createElement(z,{width:"204",src:io})),e.createElement(h,{style:{marginTop:4},onClick:()=>{i("story");}},"Next")),r==="story"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Story"),e.createElement("p",null,"Each named export is a story. Its contents specify how the story is rendered in addition to other configuration options."),e.createElement(z,{width:"190",src:ao})),e.createElement(h,{style:{marginTop:4},onClick:()=>{i("args");}},"Next")),r==="args"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Args"),e.createElement("p",null,"Args are inputs that are passed to the component, which Storybook uses to render the component in different states. In React, args = props. They also specify the initial control settings for the story."),e.createElement(z,{width:"253",src:lo})),e.createElement(h,{style:{marginTop:4},onClick:()=>{i("customStory");}},"Next")),r==="customStory"&&(m?.error?null:e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Create your first story"),e.createElement("p",null,"Now it's your turn. See how easy it is to create your first story by following these steps below."),e.createElement(Ft,null,e.createElement(W,{isCompleted:s||m?.data,index:1},"Copy the Warning story"),e.createElement(W,{isCompleted:m?.data,index:2},"Open"," ",d?.data?e.createElement(It,null,d.data):e.createElement(e.Fragment,null,"the Button Story")," ","in your current working directory"),e.createElement(W,{isCompleted:m?.data,index:3},"Paste it at the bottom of the file"))),m?.data?e.createElement(h,{onClick:()=>{t();}},"Go to story"):null)))))))}var So=a(()=>{D();G();Lt();Gt();Qt();Vt();Kt();oo();ro();no();so();po();co();fo();ho();xo();});var Po={};zo(Po,{default:()=>vo});function vo({api:t}){let[o,n]=useState(!0),[r,i]=useState(!1),[s,l]=useState("1:Welcome"),w=useCallback(()=>{let p=new URL(window.location.href);p.searchParams.delete("onboarding");let d=decodeURIComponent(p.searchParams.get("path"));p.search=`?path=${d}`,history.replaceState({},"",p.href),n(!1);},[n]);return useEffect(()=>{let p;return s==="4:VisitNewStory"&&(i(!0),p=window.setTimeout(()=>{l("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(p);}},[s]),useEffect(()=>{t.once(CURRENT_STORY_WAS_SET,({storyId:p})=>{p!=="example-button--primary"&&t.selectStory("example-button--primary",void 0,{ref:void 0}),t.togglePanel(!0),t.togglePanelPosition("bottom"),t.setSelectedPanel("addon-controls");});},[]),useEffect(()=>{let p=d=>{d==="configure-your-project--docs"&&w();};return t.on(STORY_CHANGED,p),()=>{t.off(STORY_CHANGED,p);}},[]),o?e.createElement(ThemeProvider,{theme:Oe},r&&e.createElement(B,{numberOfPieces:1e3,initialVelocityY:3,recycle:!1,onConfettiComplete:p=>{p.reset(),i(!1);}}),s==="1:Welcome"&&e.createElement(vt,{onProceed:()=>{l("2:StorybookTour");},onSkip:w}),(s==="2:StorybookTour"||s==="5:ConfigureYourProject")&&e.createElement(nt,{api:t,isFinalStep:s==="5:ConfigureYourProject",onFirstTourDone:()=>{l("3:WriteYourStory");}}),s==="3:WriteYourStory"&&e.createElement(Co,{api:t,addonsStore:addons,onFinish:()=>{t.selectStory("example-button--warning"),l("4:VisitNewStory");}})):null}var Oe,ko=a(()=>{it();Pt();So();E();Oe=ensure(themes.light);});var je=lazy(()=>Promise.resolve().then(()=>(ko(),Po)));addons.register("@storybook/addon-onboarding",async t=>{if(!(t.getUrlState().path==="/onboarding"))return;let n=!1;try{n=!!(await(await fetch("./index.json")).json()).entries["example-button--primary"];}catch{}if(n){let r=document.createElement("div");r.id="addon-onboarding",document.body.appendChild(r),We.render(e.createElement(Suspense,{fallback:e.createElement("div",null,"Loading...")},e.createElement(je,{api:t})),r);}});
|
|
195
318
|
//# sourceMappingURL=out.js.map
|
|
196
319
|
//# sourceMappingURL=manager.mjs.map
|