@ably/ui 14.3.0 → 14.3.2
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/README.md +4 -14
- package/core/Code.js +1 -1
- package/core/CookieMessage.js +1 -1
- package/core/DropdownMenu.js +1 -1
- package/core/Expander.js +1 -1
- package/core/Flash.js +1 -1
- package/core/Meganav/component.js +1 -1
- package/core/Meganav.js +1 -1
- package/core/MeganavItemsMobile.js +1 -1
- package/core/MeganavItemsSignedIn.js +1 -1
- package/core/MeganavSearchSuggestions/component.js +1 -1
- package/core/Notice.js +1 -1
- package/core/SignOutLink.js +1 -1
- package/core/Slider/component.js +1 -1
- package/core/Slider.js +1 -1
- package/core/Status.js +1 -1
- package/core/Table/Table.js +1 -1
- package/core/Table/TableCell.js +5 -5
- package/core/Tooltip.js +1 -1
- package/core/hubspot-chat-toggle.js +1 -1
- package/core/react-renderer.js +1 -1
- package/core/remote-blogs-posts.js +1 -1
- package/core/remote-session-data.js +1 -1
- package/package.json +12 -11
package/README.md
CHANGED
|
@@ -289,20 +289,10 @@ This will release the packages and update library and create & push the commit &
|
|
|
289
289
|
|
|
290
290
|
### Running tests
|
|
291
291
|
|
|
292
|
-
|
|
292
|
+
`ably-ui` uses Storybook's `test-runner`, which on push automatically turns all stories into executable tests, underpinned by Jest and Playright. This means that we don't have to explicitly write tests for stories, though we have the ability to write [https://storybook.js.org/docs/writing-stories/play-function](play functions), which allow us to test more detailed interactions. More information on the capabilities of `test-runner` can be found [https://storybook.js.org/docs/writing-tests/test-runner](here).
|
|
293
293
|
|
|
294
|
-
|
|
294
|
+
Snapshots are also assessed via `test-runner`. To generate new snapshots, run `yarn test:update-snapshots`.
|
|
295
295
|
|
|
296
|
-
|
|
296
|
+
You can run the tests by either running a dev instance of Storybook locally and then running `yarn test`, or by pushing a branch to GitHub.
|
|
297
297
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
**Behaviour testing** clicks around the DOM and checks for singular elements on the page to be updated.
|
|
301
|
-
|
|
302
|
-
To run integration tests (using [Cypress](https://www.cypress.io/)), you'll need to have the "preview app" running on port 5000, then run:
|
|
303
|
-
|
|
304
|
-
```bash
|
|
305
|
-
yarn cy:open
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
This will open the UI for Cypress, from which you can run the tests. Screenshots are saved in `cypress/screenshots`.
|
|
298
|
+
A related quirk to mention here is that the SWC config has been renamed to `.swc` (away from the default `.swcrc`), as `test-runner` also uses SWC and its config conflicted with ours.
|
package/core/Code.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS=""})=>{
|
|
1
|
+
import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS=""})=>{const HTMLraw=highlightSnippet(language,`${snippet}`.trim())??"";const className=`language-${language} ${textSize}`;return React.createElement("div",{className:`hljs overflow-auto ${padding} ${additionalCSS}`,"data-id":"code"},React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
|
package/core/CookieMessage.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import _absUrl from"./url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[]);const handleClose=()=>{
|
|
1
|
+
import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import _absUrl from"./url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[]);const handleClose=()=>{Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});ref.current?.classList.add("bottom-1","opacity-0");setTimeout(()=>setHideCookieMessage(true),500)};const absUrl=path=>_absUrl(path,urlBase);if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-32"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;
|
package/core/DropdownMenu.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{
|
|
1
|
+
import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{if(ref.current?.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>{document.removeEventListener("click",clickHandler)}},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,additionalTriggerCSS=""})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger",onClick:()=>setOpen(!isOpen),className:`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`},React.createElement("span",{className:"leading-normal"},children),React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-cool-black",size:"1.25rem",additionalCSS:"transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"}))};const Content=({children,anchorPosition="right",additionalContentCSS})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}const anchorPositionClasses=anchorPosition==="right"?"right-0":"left-0";return React.createElement("div",{id:"menu-content",className:`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`,style:{minWidth:275,top:44}},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded"},React.createElement("p",{className:"mb-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",color:"text-cool-black",additionalCSS:"align-middle ml-8 relative -top-1 -left-4"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-16"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
|
package/core/Expander.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useRef,useState}from"react";const Expander=({heightThreshold=200,className,fadeClassName,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[height,setHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{
|
|
1
|
+
import React,{useEffect,useRef,useState}from"react";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[height,setHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{const contentHeight=innerRef.current?.clientHeight??heightThreshold;if(contentHeight<heightThreshold){setHeight("auto")}else if(expanded){setHeight(contentHeight)}else{setHeight(heightThreshold)}setShowControls(contentHeight>=heightThreshold)},[heightThreshold,expanded]);return React.createElement(React.Fragment,null,React.createElement("div",{style:{height},"data-testid":"expander-container",className:`overflow-hidden transition-all relative ${className??""}`},showControls&&!expanded&&React.createElement("div",{className:`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName??""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,"data-testid":"expander-controls",className:`mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light ${controlsClassName??""}`},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +"))};export default Expander;
|
package/core/Flash.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{
|
|
1
|
+
import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";import MeganavControl from"../MeganavControl/component.js";import MeganavControlMobileDropdown from"../MeganavControlMobileDropdown/component.js";import MobilePanelOpenClick from"../MeganavControlMobilePanelOpen/component.js";import MobilePanelCloseClick from"../MeganavControlMobilePanelClose/component.js";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.js";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.js";const windowOnBlur=closeAll=>{window.onblur=()=>closeAll();return{teardown:()=>window.onblur=null}};const documentClick=closeAll=>{const meganav=queryId("meganav");const clickHandler=e=>{if(meganav.contains(e.target))return;closeAll()};document.addEventListener("click",clickHandler);return{teardown:()=>document.removeEventListener("click",clickHandler)}};const documentScroll=themeName=>{if(themeName!=="transparentToWhite")return{teardown:()=>{}};const meganav=queryId("meganav");const navItems=queryIdAll("meganav-link");const controlMobileDropdownMenu=queryId("meganav-control-mobile-dropdown-menu");const controlMobileDropdownClose=queryId("meganav-control-mobile-dropdown-close");const controls=queryIdAll("meganav-control");const signUpBtn=queryId("meganav-sign-up-btn");const invertTextCollection=[...Array.from(controls),...Array.from(navItems),queryId("meganav-logo")];const invertMobleDropdownColor=invert=>{const whiteToBlack=["ui-icon-white","ui-icon-cool-black"];const blackToWhite=[...whiteToBlack].reverse();if(invert){controlMobileDropdownMenu
|
|
1
|
+
import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";import MeganavControl from"../MeganavControl/component.js";import MeganavControlMobileDropdown from"../MeganavControlMobileDropdown/component.js";import MobilePanelOpenClick from"../MeganavControlMobilePanelOpen/component.js";import MobilePanelCloseClick from"../MeganavControlMobilePanelClose/component.js";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.js";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.js";const windowOnBlur=closeAll=>{window.onblur=()=>closeAll();return{teardown:()=>window.onblur=null}};const documentClick=closeAll=>{const meganav=queryId("meganav");const clickHandler=e=>{if(meganav.contains(e.target))return;closeAll()};document.addEventListener("click",clickHandler);return{teardown:()=>document.removeEventListener("click",clickHandler)}};const documentScroll=themeName=>{if(themeName!=="transparentToWhite")return{teardown:()=>{}};const meganav=queryId("meganav");const navItems=queryIdAll("meganav-link");const controlMobileDropdownMenu=queryId("meganav-control-mobile-dropdown-menu");const controlMobileDropdownClose=queryId("meganav-control-mobile-dropdown-close");const controls=queryIdAll("meganav-control");const signUpBtn=queryId("meganav-sign-up-btn");const invertTextCollection=[...Array.from(controls),...Array.from(navItems),queryId("meganav-logo")];const invertMobleDropdownColor=invert=>{const whiteToBlack=["ui-icon-white","ui-icon-cool-black"];const blackToWhite=[...whiteToBlack].reverse();if(invert){controlMobileDropdownMenu?.classList.replace(...whiteToBlack);controlMobileDropdownClose?.classList.replace(...whiteToBlack)}else{controlMobileDropdownMenu?.classList.replace(...blackToWhite);controlMobileDropdownClose?.classList.replace(...blackToWhite)}};const inverSignupBtnColors=invert=>{if(invert){signUpBtn?.classList.replace("bg-white","bg-cool-black");signUpBtn?.classList.replace("text-cool-black","text-white")}else{signUpBtn?.classList.replace("bg-cool-black","bg-white");signUpBtn?.classList.replace("text-white","text-cool-black")}};const scrollHandler=throttle(()=>{if(window.scrollY>5){meganav.classList.replace("bg-transparent","bg-white");inverSignupBtnColors(true);invertMobleDropdownColor(true);invertTextCollection.forEach(n=>n.classList.replace("text-white","text-cool-black"))}else{meganav.classList.replace("bg-white","bg-transparent");inverSignupBtnColors(false);invertMobleDropdownColor(false);invertTextCollection.forEach(n=>n.classList.replace("text-cool-black","text-white"))}},150);document.addEventListener("scroll",scrollHandler);return{teardown:()=>document.removeEventListener("scroll",scrollHandler)}};export default function Meganav({themeName,addSearchApiKey}={themeName:null}){const controls=MeganavControl();const panelOpenControls=MobilePanelOpenClick();const panelCloseControls=MobilePanelCloseClick();const search=MeganavSearchAutocomplete(addSearchApiKey);const searchSuggestions=MeganavSearchSuggestions();const mobileDropdownControl=MeganavControlMobileDropdown({clearPanels:()=>[...panelOpenControls,...panelCloseControls].forEach(i=>i.clear())});const closeAll=()=>[mobileDropdownControl,searchSuggestions,...panelOpenControls,...panelCloseControls,...controls,...search].forEach(i=>i.clear());const teardowns=[documentScroll(themeName),documentClick(closeAll),windowOnBlur(closeAll),mobileDropdownControl,searchSuggestions,...controls,...panelOpenControls,...panelCloseControls,...search].map(i=>i.teardown);return()=>teardowns.forEach(teardown=>teardown())}
|
package/core/Meganav.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl})=>{return sessionState.signedIn?React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme}):React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavSearch,{absUrl:absUrl})),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);
|
|
1
|
+
import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl})=>{return sessionState.signedIn?React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme}):React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavSearch,{absUrl:absUrl})),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);return React.createElement("nav",{className:`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`,"data-id":"meganav","aria-label":"Main"},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement("div",{className:"ui-meganav ui-grid-px"},React.createElement("div",{className:"mr-24"},React.createElement(Logo,{dataId:"meganav-logo",href:urlBase,logoUrl:paths?.logo??""})),React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl,statusUrl:statusUrl}),sessionState?React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl}):React.createElement(SignInPlaceholder,null),React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl,statusUrl:statusUrl})))};export default Meganav;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},React.createElement("li",null,
|
|
1
|
+
import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},React.createElement("li",null,sessionState?.signedIn&&sessionState?.logOut?React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavControlMobileDropdown,{theme:theme}),React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":"meganav-mobile-search-input"}),React.createElement(MeganavSearchAutocomplete,null))),React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),React.createElement("li",null,React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),React.createElement("hr",{className:"ui-meganav-hr mb-20"}),React.createElement("div",{className:"flex justify-between items-center mb-16"},React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),sessionState?.signedIn&&sessionState?.account?React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return
|
|
1
|
+
import React from"react";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return string?.length&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,absUrl})=>{const accountName=truncate(sessionState.accountName,20);return React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item relative"},React.createElement("span",{className:"ui-meganav-link h-64 hover:text-cool-black mr-0"},accountName)),React.createElement("li",null,React.createElement(MeganavSearch,{absUrl:absUrl})),sessionState.account&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>
|
|
1
|
+
import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>e.changedTouches[0]?.clientX-touchStartX;const withinBuffer=distance=>Math.abs(distance)<DRAG_BUFFER;const getItemsTotalWidth=nodes=>nodes.map(item=>item.getBoundingClientRect().width).reduce((acc,val)=>acc+val,0);const MeganavSearchSuggestions=()=>{const suggestionsToggle=queryId("meganav-mobile-search-input");const suggestions=queryId("meganav-mobile-search-suggestions");const list=suggestions.querySelector("ul");const listItems=Array.from(list.querySelectorAll("li"));const dragLeft=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold))return;updateTranslateX(list,translateX)};const dragLeftEnd=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);let translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold)){translateX=0}updateTranslateX(list,translateX)};const dragRight=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);const itemsTotalWidth=getItemsTotalWidth(listItems);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){return}updateTranslateX(list,translateX)};const dragRightEnd=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const itemsTotalWidth=getItemsTotalWidth(listItems);let translateX=Math.round(currentTranslateX+distance);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){translateX=-(itemsTotalWidth-listWidth+threshold)}updateTranslateX(list,translateX)};let touchStartX;const touchstartHandler=e=>{touchStartX=e.touches[0]?.clientX};const touchmoveHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeft(distance,24):dragRight(distance,96)};const touchendHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};const focusSuggestionsHandler=()=>{suggestions.classList.add("max-h-96")};const blurSuggestionsHandler=e=>{if(e.relatedTarget===suggestions.querySelectorAll("a")[0]){return}suggestions.classList.remove("max-h-96")};const wheelHandler=e=>{const distance=e.deltaY*4;if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};suggestionsToggle.addEventListener("focus",focusSuggestionsHandler);suggestionsToggle.addEventListener("blur",blurSuggestionsHandler);suggestions.addEventListener("touchstart",touchstartHandler);suggestions.addEventListener("touchmove",touchmoveHandler);suggestions.addEventListener("touchend",touchendHandler);suggestions.addEventListener("wheel",wheelHandler);return{teardown:()=>{suggestionsToggle.removeEventListener("focus",focusSuggestionsHandler);suggestionsToggle.removeEventListener("blur",blurSuggestionsHandler);suggestions.removeEventListener("touchstart",touchstartHandler);suggestions.removeEventListener("touchmove",touchmoveHandler);suggestions.removeEventListener("touchend",touchendHandler)},clear:()=>{suggestions.classList.remove("max-h-96");list.style.transform=`translateX(0px)`}}};export default MeganavSearchSuggestions;
|
package/core/Notice.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect}from"react";import NoticeScripts from"./Notice/component.js";import Icon from"./Icon";const contentWrapperClasses="w-full pr-8 ui-text-p3 self-center";const ContentWrapper=({buttonLink,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:contentWrapperClasses},children):React.createElement("div",{className:contentWrapperClasses},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-gradient-active-orange",textColor="text-white"})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config
|
|
1
|
+
import React,{useEffect}from"react";import NoticeScripts from"./Notice/component.js";import Icon from"./Icon";const contentWrapperClasses="w-full pr-8 ui-text-p3 self-center";const ContentWrapper=({buttonLink,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:contentWrapperClasses},children):React.createElement("div",{className:contentWrapperClasses},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-gradient-active-orange",textColor="text-white"})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.collapse||false}})},[]);const wrapperClasses=["ui-announcement",bgColor,textColor].join(" ");return React.createElement("div",{className:wrapperClasses,"data-id":"ui-notice",style:{maxHeight:0,overflow:"hidden"}},React.createElement("div",{className:"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink??"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-4"},title),React.createElement("span",{className:"pr-4"},bodyText),buttonLabel&&React.createElement("span",{className:"underline cursor-pointer whitespace-nowrap"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-20 w-20 border-none bg-none self-baseline"},React.createElement(Icon,{name:"icon-gui-close",size:"1.25rem",color:"text-cool-black"}))))};export default Notice;
|
package/core/SignOutLink.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useRef}from"react";const SignOutLink=({token,href,text,children,absUrl})=>{const formRef=useRef(null);const onClick=e=>{
|
|
1
|
+
import React,{useRef}from"react";const SignOutLink=({token,href,text,children,absUrl})=>{const formRef=useRef(null);const onClick=e=>{formRef.current?.submit();e.preventDefault()};return React.createElement(React.Fragment,null,React.createElement("form",{ref:formRef,method:"post",action:absUrl(href),className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:token,type:"hidden"})),children({href,text,onClick}))};export default SignOutLink;
|
package/core/Slider/component.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";const mdBreakpoint=()=>window.matchMedia("(min-width: 48rem)").matches;const DRAG_BUFFER=20;const init=slidesContainer=>{const transformContainer=queryId("slider-strip",slidesContainer);const slides=Array.from(queryIdAll("slider-slide",slidesContainer));const slideLeftChevron=queryId("slider-previous",slidesContainer);const slideRightChevron=queryId("slider-next",slidesContainer);const slideMarkers=Array.from(queryIdAll("slider-marker",slidesContainer));const sliderControls=queryId("slider-controls",slidesContainer);sliderControls.classList.replace("hidden","flex");const slidesLength=slides.length;const slidesWidth=slidesContainer.getBoundingClientRect().width;const{width:slideWidth,left:slideLeftDistance}=slides[0].getBoundingClientRect();const{left:slideLeftDistanceSecond}=slides[1].getBoundingClientRect();const slideGap=slideLeftDistanceSecond-slideLeftDistance-slideWidth;const adjustment=(slidesWidth-slideWidth)/2;let currentIndex=0;let touchStartX=0;const calculateTransform=index=>index*-slideWidth+adjustment+index*-slideGap;const updateSlide=index=>transformContainer.style.transform=`translateX(${calculateTransform(index)}px)`;const updateMarkers=index=>{slideMarkers.forEach(marker=>marker.classList.remove("text-active-orange"));slideMarkers[index].classList.remove("text-cool-black");slideMarkers[index].classList.add("text-active-orange")};const slideLeft=()=>{currentIndex=currentIndex-1<=0?0:currentIndex-1;updateSlide(currentIndex);updateMarkers(currentIndex)};const slideRight=()=>{currentIndex=currentIndex+1>=slidesLength?currentIndex:currentIndex+1;updateSlide(currentIndex);updateMarkers(currentIndex)};updateSlide(0);updateMarkers(0);slideLeftChevron.addEventListener("click",slideLeft);transformContainer.addEventListener("touchstart",e=>{
|
|
1
|
+
import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";const mdBreakpoint=()=>window.matchMedia("(min-width: 48rem)").matches;const DRAG_BUFFER=20;const init=slidesContainer=>{const transformContainer=queryId("slider-strip",slidesContainer);const slides=Array.from(queryIdAll("slider-slide",slidesContainer));const slideLeftChevron=queryId("slider-previous",slidesContainer);const slideRightChevron=queryId("slider-next",slidesContainer);const slideMarkers=Array.from(queryIdAll("slider-marker",slidesContainer));const sliderControls=queryId("slider-controls",slidesContainer);sliderControls.classList.replace("hidden","flex");const slidesLength=slides.length;const slidesWidth=slidesContainer.getBoundingClientRect().width;const{width:slideWidth,left:slideLeftDistance}=slides[0].getBoundingClientRect();const{left:slideLeftDistanceSecond}=slides[1].getBoundingClientRect();const slideGap=slideLeftDistanceSecond-slideLeftDistance-slideWidth;const adjustment=(slidesWidth-slideWidth)/2;let currentIndex=0;let touchStartX=0;const calculateTransform=index=>index*-slideWidth+adjustment+index*-slideGap;const updateSlide=index=>transformContainer.style.transform=`translateX(${calculateTransform(index)}px)`;const updateMarkers=index=>{slideMarkers.forEach(marker=>marker.classList.remove("text-active-orange"));slideMarkers[index].classList.remove("text-cool-black");slideMarkers[index].classList.add("text-active-orange")};const slideLeft=()=>{currentIndex=currentIndex-1<=0?0:currentIndex-1;updateSlide(currentIndex);updateMarkers(currentIndex)};const slideRight=()=>{currentIndex=currentIndex+1>=slidesLength?currentIndex:currentIndex+1;updateSlide(currentIndex);updateMarkers(currentIndex)};updateSlide(0);updateMarkers(0);slideLeftChevron.addEventListener("click",slideLeft);transformContainer.addEventListener("touchstart",e=>{touchStartX=e.touches[0]?.clientX});transformContainer.addEventListener("touchend",e=>{const distance=e.changedTouches[0]?.clientX-touchStartX;if(Math.abs(distance)<DRAG_BUFFER)return;const direction=distance>0?slideLeft:slideRight;direction()});slideRightChevron.addEventListener("click",slideRight);return()=>{transformContainer.style.transform=null;sliderControls.classList.replace("flex","hidden")}};const Slider=({container,mqEnableThreshold})=>{if(!container)return;const breakpointCheck=mqEnableThreshold||(()=>!mdBreakpoint());let unmount=()=>{};if(breakpointCheck())unmount=init(container);window.addEventListener("resize",throttle(()=>{if(breakpointCheck()){unmount=init(container)}else{unmount()}},100))};export default Slider;
|
package/core/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=
|
|
1
|
+
import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=options?.controlPosition==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(next,options?.interval??1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24 -mt-16":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:options?.interval??1e4,intervalIndicator:options?.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;
|
package/core/Status.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useState}from"react";const indicatorClass=indicator=>{switch(indicator){case"none":return"bg-green-500";case"operational":return"bg-green-500";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-orange-800";default:return"bg-neutral-500"}};const Status=({statusUrl,additionalCSS})=>{
|
|
1
|
+
import React,{useEffect,useState}from"react";const indicatorClass=indicator=>{switch(indicator){case"none":return"bg-green-500";case"operational":return"bg-green-500";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-orange-800";default:return"bg-neutral-500"}};const Status=({statusUrl,additionalCSS})=>{const[data,setData]=useState(null);useEffect(()=>{let interval;if(statusUrl!==""){const fetchData=async()=>{try{const response=await fetch(statusUrl);const jsonData=await response.json();setData(jsonData)}catch(error){console.error("Error fetching status data:",error)}};fetchData();interval=setInterval(fetchData,6e4)}return()=>{clearInterval(interval)}},[statusUrl]);return React.createElement("a",{href:"https://status.ably.com",className:`inline-block ${additionalCSS}`,target:"_blank",rel:"noreferrer"},React.createElement("span",{className:"flex items-center h-[1.5rem] p-[0.25rem]"},React.createElement("span",{className:`w-[1rem] h-[1rem] leading-[1rem] rounded-full ${!data?"animate-pulse":""} ${indicatorClass(data?.status?.indicator)}`})))};export default Status;
|
package/core/Table/Table.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>
|
|
1
|
+
import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>React.createElement("table",{id:id,...rest,className:`ui-standard-container mb-4 sm:table-fixed ${rest?.className??""}`},children);export const TableBody=({children,...rest})=>React.createElement("tbody",rest,children);export const TableHeader=({children,...rest})=>React.createElement("thead",{...rest,className:`sticky bg-white z-10 top-0 ${rest?.className??""}`},cloneElement(children,{isHeader:true}));export const TableRowHeader=({children,...rest})=>React.createElement("tr",{className:`-ml-24 mt-8 sm:ml-0 sm:mt-0 sm:sticky z-10 ${rest?.className??""}`},cloneElement(children,{isRowHeader:true}));
|
package/core/Table/TableCell.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from"react";const LabelCell=({children,...rest})=>{
|
|
2
|
-
ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${
|
|
3
|
-
`;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>
|
|
1
|
+
import React from"react";const LabelCell=({children,...rest})=>{const classes=`
|
|
2
|
+
ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${rest?.className??""}
|
|
3
|
+
`;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>React.createElement("td",{...rest,className:`
|
|
4
4
|
border-light-grey sm:p-24 leading-none flex sm:table-cell
|
|
5
5
|
${isRowHeader?"rounded-l-none rounded-r sm:rounded-lg py-20 px-24":"py-6"}
|
|
6
|
-
${
|
|
7
|
-
`},children)
|
|
6
|
+
${rest?.className??""}
|
|
7
|
+
`},children);const HeaderCell=({children,...rest})=>React.createElement("td",{...rest,className:`ui-text-h3 px-24 py-24 hidden sm:table-cell ${rest?.className??""}`},children);const CtaCell=({children,...rest})=>React.createElement("td",{...rest,className:`pt-24 hidden sm:table-cell ${rest?.className??""}`},children);export{TableCell,LabelCell,HeaderCell,CtaCell};
|
package/core/Tooltip.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children,triggerProps,tooltipProps,...rest})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){
|
|
1
|
+
import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children,triggerProps,tooltipProps,...rest})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);return React.createElement("div",{...rest,className:`relative inline-block align-top h-16 ${rest?.className??""}`},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`ml-8 p-0 relative top-1 focus:outline-none ${triggerProps?.className??""}`},React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?React.createElement("div",{role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${tooltipProps?.className??""}`},React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{queryId}from"./dom-query";function enableBtn(el,text){el.disabled=false;el.innerText=text}function disableBtn(el,text){el.disabled=true;el.innerText=text}const WAIT_BETWEEN_RETRIES_MS=100;let MAX_RETRY_COUNT=30;export default function toggleChatWidget(params={}){const{dataId}=params;const container=queryId(dataId);const chatButton=queryId("open-chat-widget",container);const textEnabled=chatButton.dataset.enabledLabel;const textDisabled=chatButton.dataset.disabledLabel;if(!dataId||!container)return;const trigger=queryId("open-chat-widget",container);let clickHandler;const waitForScript=delay=>{
|
|
1
|
+
import{queryId}from"./dom-query";function enableBtn(el,text){el.disabled=false;el.innerText=text}function disableBtn(el,text){el.disabled=true;el.innerText=text}const WAIT_BETWEEN_RETRIES_MS=100;let MAX_RETRY_COUNT=30;export default function toggleChatWidget(params={}){const{dataId}=params;const container=queryId(dataId);const chatButton=queryId("open-chat-widget",container);const textEnabled=chatButton.dataset.enabledLabel;const textDisabled=chatButton.dataset.disabledLabel;if(!dataId||!container)return;const trigger=queryId("open-chat-widget",container);let clickHandler;const waitForScript=delay=>{const widget=window?.HubSpotConversations?.widget;const iframe=document.querySelector("#hubspot-messages-iframe-container");clickHandler=e=>{e.preventDefault();widget.open()};if(widget&&iframe){trigger.addEventListener("click",clickHandler);enableBtn(trigger,textEnabled)}else if(--MAX_RETRY_COUNT){setTimeout(()=>waitForScript(WAIT_BETWEEN_RETRIES_MS),delay)}};disableBtn(trigger,textDisabled);waitForScript(0);return()=>{disableBtn(trigger,textDisabled);trigger.removeEventListener("click",clickHandler)}}
|
package/core/react-renderer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import{createRoot}from"react-dom/client";const renderComponent=(Component,props,node)=>{const root=createRoot(node);root.render(React.createElement(Component,props))};export{renderComponent};export default function reactRenderer(components){const reactComponents=document.querySelectorAll("[data-react]");Array.from(reactComponents).forEach(node=>{
|
|
1
|
+
import React from"react";import{createRoot}from"react-dom/client";const renderComponent=(Component,props,node)=>{const root=createRoot(node);root.render(React.createElement(Component,props))};export{renderComponent};export default function reactRenderer(components){const reactComponents=document.querySelectorAll("[data-react]");Array.from(reactComponents).forEach(node=>{const className=node.getAttribute("data-react")??"";const Constructor=components[className];if(!Constructor)return;const propsJson=node.getAttribute("data-react-props");const props=propsJson&&JSON.parse(propsJson||"");const root=createRoot(node);root.render(React.createElement(Constructor,props));node.removeAttribute("data-react");node.removeAttribute("data-react-props")})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{isJsonResponse}from"./remote-data-util";const fetchBlogPosts=async(store,blogUrl)=>{try{if(!blogUrl){console.log(`Skipping fetching blog posts, invalid blogUrl: "${blogUrl}"`);return}const res=await fetch(blogUrl);if(isJsonResponse(res.headers.get("content-type"))){const payload=await res.json();store.dispatch({type:"blog/loaded",payload})}else{throw new Error("Blog posts url is not serving json")}}catch(e){console.warn("Could not fetch blog posts due to error:",e)}};const initialState={recent:null};const REDUCER_KEY="blogPosts";const reducerBlogPosts={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"blog/loaded":return{...state,recent:action.payload};default:return state}}};const selectRecentBlogPosts=store=>
|
|
1
|
+
import{isJsonResponse}from"./remote-data-util";const fetchBlogPosts=async(store,blogUrl)=>{try{if(!blogUrl){console.log(`Skipping fetching blog posts, invalid blogUrl: "${blogUrl}"`);return}const res=await fetch(blogUrl);if(isJsonResponse(res.headers.get("content-type"))){const payload=await res.json();store.dispatch({type:"blog/loaded",payload})}else{throw new Error("Blog posts url is not serving json")}}catch(e){console.warn("Could not fetch blog posts due to error:",e)}};const initialState={recent:null};const REDUCER_KEY="blogPosts";const reducerBlogPosts={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"blog/loaded":return{...state,recent:action.payload};default:return state}}};const selectRecentBlogPosts=store=>store.getState()[REDUCER_KEY]?.recent;export{fetchBlogPosts,reducerBlogPosts,selectRecentBlogPosts};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{isJsonResponse}from"./remote-data-util";const NOT_FOUND_ERROR_CODE="not-found";const fetchSessionData=async(store,sessionUrl)=>{const sessionLoaded=(payload={})=>store.dispatch({type:"session/loaded",payload});try{if(!sessionUrl){console.log(`Skipping fetching session, invalid sessionUrl: "${sessionUrl}"`);sessionLoaded();return}const res=await fetch(sessionUrl,{cache:"no-cache"});const jsonResponse=isJsonResponse(res.headers.get("content-type"));if(!jsonResponse){throw new Error("Session endpoint is not serving json")}const payload=await res.json();if(payload.error===NOT_FOUND_ERROR_CODE){sessionLoaded()}else{sessionLoaded(payload)}}catch(e){sessionLoaded();console.warn("Could not fetch session data due to error:",e)}};const initialState={data:null};const REDUCER_KEY="session";const reducerSessionData={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"session/loaded":return{...state,data:action.payload};default:return state}}};const selectSessionData=store=>
|
|
1
|
+
import{isJsonResponse}from"./remote-data-util";const NOT_FOUND_ERROR_CODE="not-found";const fetchSessionData=async(store,sessionUrl)=>{const sessionLoaded=(payload={})=>store.dispatch({type:"session/loaded",payload});try{if(!sessionUrl){console.log(`Skipping fetching session, invalid sessionUrl: "${sessionUrl}"`);sessionLoaded();return}const res=await fetch(sessionUrl,{cache:"no-cache"});const jsonResponse=isJsonResponse(res.headers.get("content-type"));if(!jsonResponse){throw new Error("Session endpoint is not serving json")}const payload=await res.json();if(payload.error===NOT_FOUND_ERROR_CODE){sessionLoaded()}else{sessionLoaded(payload)}}catch(e){sessionLoaded();console.warn("Could not fetch session data due to error:",e)}};const initialState={data:null};const REDUCER_KEY="session";const reducerSessionData={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"session/loaded":return{...state,data:action.payload};default:return state}}};const selectSessionData=store=>store.getState()[REDUCER_KEY]?.data;export{fetchSessionData,reducerSessionData,selectSessionData};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "14.3.
|
|
3
|
+
"version": "14.3.2",
|
|
4
4
|
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -14,13 +14,14 @@
|
|
|
14
14
|
"tailwind.extend.js"
|
|
15
15
|
],
|
|
16
16
|
"devDependencies": {
|
|
17
|
-
"@
|
|
17
|
+
"@storybook/addon-a11y": "^8.2.9",
|
|
18
18
|
"@storybook/addon-essentials": "^8.2.9",
|
|
19
19
|
"@storybook/addon-interactions": "^8.2.9",
|
|
20
20
|
"@storybook/addon-links": "^8.2.9",
|
|
21
21
|
"@storybook/blocks": "^8.2.9",
|
|
22
|
-
"@storybook/react": "^8.2.9",
|
|
23
22
|
"@storybook/react-vite": "^8.2.9",
|
|
23
|
+
"@storybook/react": "^8.2.9",
|
|
24
|
+
"@storybook/test-runner": "^0.19.1",
|
|
24
25
|
"@storybook/test": "^8.2.9",
|
|
25
26
|
"@swc/cli": "^0.4.0",
|
|
26
27
|
"@swc/core": "^1.4.11",
|
|
@@ -28,13 +29,12 @@
|
|
|
28
29
|
"@typescript-eslint/parser": "^6.21.0",
|
|
29
30
|
"@vitejs/plugin-react": "^4.2.1",
|
|
30
31
|
"autoprefixer": "^10.0.2",
|
|
31
|
-
"cypress": "^13.3.1",
|
|
32
|
-
"eslint": "^8.57.0",
|
|
33
32
|
"eslint-config-prettier": "^9.1.0",
|
|
34
33
|
"eslint-plugin-react": "^7.34.3",
|
|
35
34
|
"eslint-plugin-storybook": "^0.8.0",
|
|
36
|
-
"
|
|
35
|
+
"eslint": "^8.57.0",
|
|
37
36
|
"msw-storybook-addon": "^2.0.2",
|
|
37
|
+
"msw": "2.3.5",
|
|
38
38
|
"prettier": "^3.2.5",
|
|
39
39
|
"storybook": "^8.2.9",
|
|
40
40
|
"svg-sprite": "^2.0.4",
|
|
@@ -44,21 +44,22 @@
|
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"build:prebuild": "rm -rf core reset",
|
|
47
|
-
"build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths",
|
|
47
|
+
"build:swc": "swc src/core src/reset -d dist --quiet --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap" ,
|
|
48
48
|
"build:cleanup": "mv dist/* . && rm -r dist",
|
|
49
49
|
"build": "yarn build:prebuild && yarn build:swc && node sprites.js && yarn build:cleanup",
|
|
50
50
|
"watch": "yarn build:swc -w",
|
|
51
51
|
"format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx}",
|
|
52
52
|
"format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx}",
|
|
53
53
|
"lint": "eslint *.{js,ts} src/**/*.{js,ts,tsx}",
|
|
54
|
-
"cy:open": "cypress open",
|
|
55
|
-
"cy:headless": "cypress run --quiet",
|
|
56
54
|
"update:all": "./scripts/update-dependents.sh",
|
|
57
55
|
"pre-release": "./scripts/pre-release.sh",
|
|
58
56
|
"release": "./scripts/release.sh",
|
|
59
57
|
"start": "vite --port 5000",
|
|
60
58
|
"storybook": "yarn build && storybook dev -p 6006",
|
|
61
|
-
"build-storybook": "yarn build && storybook build -o preview"
|
|
59
|
+
"build-storybook": "yarn build && storybook build --quiet -o preview",
|
|
60
|
+
"test": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && npx http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
|
|
61
|
+
"test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && npx http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\""
|
|
62
|
+
|
|
62
63
|
},
|
|
63
64
|
"dependencies": {
|
|
64
65
|
"addsearch-js-client": "^0.8.11",
|
|
@@ -68,8 +69,8 @@
|
|
|
68
69
|
"highlightjs-curl": "^1.3.0",
|
|
69
70
|
"js-cookie": "^3.0.5",
|
|
70
71
|
"lodash.throttle": "^4.1.1",
|
|
71
|
-
"react": "^18.2.0",
|
|
72
72
|
"react-dom": "^18.2.0",
|
|
73
|
+
"react": "^18.2.0",
|
|
73
74
|
"redux": "^4.0.5",
|
|
74
75
|
"scroll-lock": "^2.1.4"
|
|
75
76
|
},
|